CSS: seletores avançados que facilitam o desenvolvimento de aplicações web

Liberando todo o poder do CSS com seletores inteligentes

E aí, jovem Jedi do CSS! Já pegou a pipoca? Porque hoje a jornada promete ser emocionante.

Vamos começar do básico, atravessando a galáxia dos seletores e, se tivermos sorte, ainda descobriremos umas estrelas desconhecidas pelo caminho.

Para iniciar nossa exploração, vamos voltar às bases e relembrar os fundamentos, afinal, recordar é viver. No universo do CSS, conhecimento é poder! Ter uma compreensão sólida dos seletores é como ter a força ao seu lado.

E, como diria Mestre Yoda: “sempre em movimento está o futuro”. Portanto, não se acomode no que já sabe, explore novas possibilidades.

O que é um Seletor de classe e como é usado em CSS?

Um seletor de classe é uma maneira de selecionar elementos em uma página da web com base em sua classe HTML associada.

As classes em HTML são atributos que podem ser atribuídos a elementos para categorizá-los ou estilizá-los de maneira específica. Os seletores CSS, ou CSS seletor, são precedidos por um ponto (.).

Seletores

Os seletores são as coordenadas de localização do nosso CSS e, por isso, conhecê-los bem é tão importante.

Eles especificam os elementos aos quais as regras de estilo CSS devem ser aplicadas. Ao otimizar a forma como selecionamos os elementos, podemos melhorar a performance do nosso site.

Confira a seguir, alguns tipos de seletores CSS mais utilizados:

Seletores Básicos

Os seletores básicos são o nosso ponto de partida. São eles que permitem que a nossa estilização se conecte aos elementos HTML.

Seletor de Tag

O seletor de tag é o mais simples de todos. Ele seleciona todos os elementos de uma determinada tag. Por exemplo, p { color: blue; } irá colorir de azul todos os parágrafos da sua página.

<p>Esse parágrafo será azul.</p>

Seletor de Classe

O seletor de classe seleciona elementos com base na classe CSS que possuem. Com ele, podemos estilizar qualquer número de elementos de maneira consistente.

Veja que .exemplo { font-size: 20px; } irá afetar todos os elementos com a classe exemplo.

<p class="exemplo">Este parágrafo terá tamanho de fonte 20px.</p>

Seletor de ID

O seletor de ID é como um foco preciso em um único elemento que possui um ID específico.

O exemplo #unico { background-color: yellow; } irá mudar o plano de fundo do elemento com o ID unico para amarelo.

<div id="unico">O fundo deste div será amarelo.</div>

Seletor Universal CSS

O seletor universal * pode afetar todos os elementos da sua página. Use-o com sabedoria.

* {
  margin: 0;
  padding: 0;
}

<p>Todos os elementos, incluindo este parágrafo, terão margem e padding 0.</p>

Seletor de Atributo

Seletor de Atributo CSS

O seletor de atributo seleciona elementos baseados nos atributos que eles possuem. Por exemplo,a[target="_blank"] { color: red; } irá colorir de vermelho todos os links que abrem em uma nova aba.

<a href="https://www.exemplo.com" target="_blank">Este link será vermelho.</a>

Combinadores

OOs combinadores são a forma de combinar diferentes seletores de maneira eficaz, ampliando o nosso poder de estilização.

Eles especificam a relação entre os seletores, indicando quais elementos devem ser estilizados com base em sua relação no código HTML. Alguns dos combinadores mais comuns são:

Combinador Irmão Adjacente

O combinador irmão adjacente + seleciona o elemento que vem imediatamente depois do primeiro elemento.

h2 + p {
  color: green;
}

<h2>Título</h2>
<p>Este parágrafo será verde.</p>
<p>Este parágrafo não será afetado.</p>

Combinador Irmão Geral

O combinador irmão geral ~ é mais abrangente, selecionando todos os elementos que seguem o primeiro.

h2 ~ p {
  color: green;
}

<h2>Título</h2>
<p>Este parágrafo será verde.</p>
<p>Este parágrafo também será verde.</p>

Combinador de Filho

O combinador de filho > seleciona apenas os elementos que são filhos diretos do primeiro elemento.

div > p {
  color: blue;
}

<div>
  <p>Este parágrafo será azul.</p>
  <span><p>Este parágrafo não será azul, pois não é um filho direto do div.</p></span>
</div>

Combinador de Descendente

O combinador de descendente (espaço) é o mais generoso, selecionando todos os elementos que são descendentes do primeiro, sejam filhos diretos ou não.

div p {
  color: blue;
}

<div>
  <p>Este parágrafo será azul.</p>
  <span><p>Este parágrafo também será azul, mesmo não sendo um filho direto do div.</p></span>
</div>

Pseudo-classes

Pseudo-classes são poderosas aliadas para refinar nossas seleções de forma eficiente. Elas permitem selecionar elementos com base em seu estado, posição ou características específicas. Vamos explorar as mais usadas a seguir.

:nth-child() e :nth-of-type()

As pseudo-classes :nth-child() e :nth-of-type() selecionam elementos baseados em sua posição entre os irmãos.

li:nth-child(2) {
  color: red;
}

<ul>
  <li>Este item não será afetado.</li>
  <li>Este item será vermelho.</li>
  <li>Este item não será afetado.</li>
</ul>

:not()

A pseudo-classe :not() é uma forma de negação. Ela seleciona todos os elementos que não correspondem ao seletor dentro dos parênteses.

div:not(.classe) {
  color: blue;
}

<div class="classe">Este div não será azul.</div>
<div>Este div será azul.</div>

:hover

A pseudo-classe :hover aplica estilos a um elemento quando o cursor do mouse está sobre ele.

button:hover {
  background-color: yellow;
}

<button>Quando você passar o mouse por cima, este botão será amarelo.</button>

:after e :before

As pseudo-classes :after e :before permitem a adição de conteúdo antes ou depois do conteúdo de um elemento.

p:before {
  content: "Coramila: ";
}

<p>Este parágrafo terá "Coramila: " antes de seu texto. Coramila é um pseudônimo para Camila.</p> 

:has

A pseudo-classe :has seleciona um elemento se ele contém um determinado elemento dentro dele.

div:has(p) {
  border: 1px solid black;
}

<div><p>Este div terá uma borda, pois contém um parágrafo.</p></div>
<div>Este div não terá uma borda, pois não contém um parágrafo.</div>

:empty

A pseudo-classe :empty seleciona todos os elementos que não têm filhos.

div:empty {
  display: none;
}

<div>Este div será exibido.</div>
<div></div> <!-- Este div não será exibido, pois está vazio. -->

:last-child e :first-child

As pseudo-classes :last-child e :first-child selecionam o primeiro ou o último filho de um elemento.

li:first-child {
  color: red;
}

<ul>
  <li>Este item será vermelho.</li>
  <li>Este item não será afetado.</li>
</ul>

:is() e :where()

Por fim, as pseudo-classes :is() e :where() aceitam uma lista de seletores e retornam o primeiro que corresponder.

p:is(.grifinoria, .luffaluffa) {
  color: blue;
}

<p class="grifinoria">Este parágrafo será azul.</p>
<p class="luffaluffa">Este parágrafo também será azul.</p>
<p class="sonserina">Este parágrafo não será afetado.</p>

Seletores CSS na vida real: aplicando todo o conhecimento adquirido

É hora de vermos alguns exemplos de como esses seletores que estudamos podem se juntar e criar efeitos incríveis.

Vocês vão ver que esses conceitos não são tão complexos quando estão aplicados em situações do dia a dia. Confiram a seguir.

Personalizando checkbox

A personalização de checkbox é um clássico.

Combinando pseudo-classes e pseudo-elementos, além do uso do combinador de irmão adjacente, podemos fazer coisas incríveis. Olha só:

input[type="checkbox"]:checked + label:after {
    left: 42px;
}

Nesse exemplo, estamos dizendo: “Ei, CSS, quero que você selecione o pseudo-elemento after de um label que é irmão adjacente de um input do tipo checkbox, mas só quando ele estiver marcado (:checked)”.

E o que fazemos com esse after selecionado? Alteramos sua propriedade left para 42px. O resultado é um belo efeito de deslizamento no nosso checkbox.

Efeito Hover em Links Específicos

Outra combinação super útil envolve o seletor de descendente e a pseudo-classe :hover. Podemos usá-los para criar efeitos interessantes ao passar o mouse sobre um elemento, como um link dentro de um parágrafo específico. Vamos ver:

p.intro a:hover {
    color: red;
}

Aqui, a mágica acontece da seguinte maneira: “Oi, CSS, quando eu passar o mouse sobre um link (a:hover), que é descendente direto de um parágrafo com a classe intro, quero que você mude a cor dele para vermelho”. Pronto, o efeito hover então é personalizado.

Destacando o Único Item de uma Lista

ul li:only-child {
    color: green;
}

Nesse caso, estamos falando o seguinte: “CSS, por favor, altere a cor para verde, mas só se o li for o único filho (:only-child) dentro da ul”. Esse é um recurso bem legal para criar um destaque em listas que contêm um único item.

E aí, gostou dos exemplos? Esses são apenas alguns dos muitos cenários que podemos enfrentar no nosso dia a dia de desenvolvedor ou desenvolvedora.

O importante é que agora você tem uma base sólida sobre seletores CSS e pode explorar ainda mais esse vasto universo.

Leia também: Como se tornar um(a) desenvolvedor(a) full-stack no próximo ano?

Conclusão

Se você me acompanhou até aqui nessa aventura intergaláctica, parabéns!

Você agora detém o conhecimento de um verdadeiro Jedi quando se trata de seletores CSS. Desde as bases com seletores simples, passando pelos combinadores e chegando nas órbitas das pseudo-classes.

Navegamos em conjunto por cada canto desse universo. Mas não se esqueça que o conhecimento é como o espaço: infinito e sempre em expansão. Esses seletores que exploramos são apenas o começo.

Assim como os astrônomos, que continuam explorando galáxias distantes, você também deve continuar expandindo seu conhecimento em CSS.

Está preparado (a) para ir além, jovem Padawan?

A documentação da Mozilla é como o telescópio Hubble para nós, devs. Com ela, você pode aprofundar ainda mais seus conhecimentos sobre os seletores CSS e muito mais.

Com o tempo e a prática, você verá que o universo dos seletores CSS se tornará menos misterioso e mais familiar.

Finalmente, como sempre, lembre-se das sábias palavras do Mestre Yoda: “Faça ou não faça. A tentativa não existe.” Portanto, continue praticando, explorando e aprimorando suas habilidades. Que a Força do CSS esteja com você.