24 seletores de CSS que todo Desenvolvedor Front-End deve conhecer

Se você aprendeu sobre os seletores básicos de CSS: identificador, classe, e descendente – e achou que tinha aprendido tudo, saiba que você está muito enganado e está deixando de aproveitar uma gama de possibilidades para aprimorar ainda mais seu desenvolvimento front-end.

A maioria dos seletores mencionados nesse artigo fazem parte da especificação do CSS3, consequentemente,  estão disponíveis apenas em navegadores modernos (mas afinal, isso ainda é uma preocupação hoje em dia?). E para se tornar um desenvolvedor front-end ágil e completo, você com certeza deve saber todos (ou quase todos) eles de cabeça.

1. *

* {
 margin: 0;
 padding: 0;
}

Antes de começarmos, vamos falar dos seletores mais óbvios, para iniciantes, em seguida, veremos os mais avançados.

O asterísco (ou estrela) tem como alvo todos os elementos em uma página. Muitos desenvolvedores usam-no para zerar as margens e o preenchimento (margine padding, respectivamente).

O * também pode ser usado como um seletor filho, por exemplo:

#container * {
 border: 1px solid red;
}

Neste caso, será mirado todo elemento que for filho de uma div com um identificador nomeado de #container.

Use essa técnica com moderação, para não pesar o navegador do usuário.

Compatibilidade

• IE6+
• Firefox
• Chrome
• Safari
• Opera

2. #X

#container {
 width: 1070px;
 margin: 0 auto;
}

Prefixar um seletor com o “jogo da velha” (ou cerquilha, ou hashtag, como preferir), permite mirar algum elemento com um identificador. Ele é um dos seletores mais usados, contudo, seja cuidadoso ao usar seletores com identificador.

Faça-se a seguinte pergunta: Preciso, realmente, aplicar um identificador a esse elemento para poder selecioná-lo

Seletores identificador são rígidos e não permitem reuso, ou seja, só é possível usar em um elemento na página. Se possível, tente usar, primeiro, o nome da tag, um dos novos elementos do HTML5 ou uma pseudo-classe.

Compatibilidade

• IE6+
• Firefox
• Chrome
• Safari
• Opera

3. .X

.success {
    color: green;
}

Esse é um seletor de classe. A diferença entre um identificador e uma classe é que, com a classe, você pode selecionar vários elementos numa mesma página. Use uma classe quando você precisar estilizar um grupo de elementos.

Compatibilidade

• IE6+
• Firefox
• Chrome
• Safari
• Opera

4. X

a { color: blue; }
nav { width: 100%; }

Se você quiser selecionar todos os elementos da página, de acordo com o tipo deles, ao invés do seu identificador ou classe, faça o simples e use um seletor de tipo. Se você precisar selecionar todos os elementos article, por exemplo, use article {}.

Compatibilidade

• IE6+
• Firefox
• Chrome
• Safari
• Opera

5. X Y

li a {
    color: blue;
}

Compatibilidade

• IE6+
• Firefox
• Chrome
• Safari
• Opera

6. X > Y

nav#menu > ul {
    background: black;
}

A diferença entre o seletor descendente X Y padrão e o seletor X > Y é que este seleciona somente filhos diretos. Por exemplo, considere o código HTML abaixo:

<nav id="menu">
   <ul>
      <li> Item da lista
        <ul>
           <li> Filho </li>
        </ul>
      </li>
      <li> Item da lista </li>
      <li> Item da lista </li>
      <li> Item da lista </li>
   </ul>
</nav>

Um seletor nav#menu > ul somente selecionará elementos ul que são filhos diretos de um nav com identificador nomeado como menu. Ele não selecionará, por exemplo, a ul que é filha do primeiro li.

Por esse motivo, há benefícios relacionados a performances ao usar o combinador de filhos, além de necessidade visual do seu layout (por exemplo, ao criar um menu com submenus).

Compatibilidade

• IE7+
• Firefox
• Chrome
• Safari
• Opera

7. X + Y

h2 + p {
 color: blue;
}

Este é chamado de seletor adjacente. Ele selecionará somente o elemento imediatamente após o primeiro elemento. No exemplo acima, selecionará só o primeiro parágrafo após cada título h2 na página, e fará que ele tenha a cor azul.

Compatibilidade

• IE7+
• Firefox
• Chrome
• Safari
• Opera

h2 ~ p {
 color: blue;
}

a[title] {
    color: pink;
}

Compatibilidade

• IE7+
• Firefox
• Chrome
• Safari
• Opera

10. X[href=”foo”]

a[href="https://www.alanpatrickk.net"] {
    color: #f6841f; /* orange */
}

O trecho acima estilizará todas as âncoras (a) que apontem para o endereço (href) https://www.alanpatrickk.net; eles serão estilizados com a cor laranja da minha identidade visual. Todas as outras âncoras da página não serão afetadas. Atente que estamos envolvendo o valor entre aspas.

Este método funciona muito bem, mas é um tanto rígido… E se o link realmente direcionar para https://www.alanpatrickk.net, mas o endereço usado seja uma URL mais completa, como a deste post, por exemplo? Para esses casos, podemos usar a sintaxe de expressões regulares. Veja nos próximos itens da lista.

Compatibilidade

• IE7+
• Firefox
• Chrome
• Safari
• Opera

11. X[href*=”foo”]

a[href*="alanpatrickk"] {
    color: #f6841f; /* orange */
}

Pronto, é isso o que precisamos. O asterisco designa que o valor utilizado no seletor deve aparecer em algum lugar do valor do atributo do elemento. Assim, esse novo seletor cobre qualquer link que contenha alanpatrickk no seu valor.

Tenha em mente que ele é bem abrangente. Se a âncora apontar para algum site que não seja alanpatrickk.net, mas que tenha em sua URL a cadeia de caracteres alanpatrickk (por exemplo, instagram.com/alanpatrickk)? Quando precisar ser mais específico, use ^ e $, para referenciar o começo e o fim de uma cadeia de caracteres, respectivamente (veja próximo item).

Compatibilidade

• IE7+
• Firefox
• Chrome
• Safari
• Opera

12. X[href^=”foo”]

a[href^="https://www.alanpatrickk"] {
    color: #f6841f; /* orange */
}

Continuando nosso exemplo, com isso resolvemos o problema. Agora, somente será modificado a cor as âncoras (a) que iniciem com a URL do meu site (https://www.alanpatrickk) e não afetará outras âncoras.

O acento circunflexo é comumente usado em expressões regulares para designar o começo de uma cadeia de caracteres. Se quisermos selecionar todas as âncoras que tem um atributo href que começam com http, nós poderíamos usar um trecho de código parecido com isto: a[href^="https://www.alanpatrickk"] {}.

Compatibilidade

• IE7+
• Firefox
• Chrome
• Safari
• Opera

13. X[href$=”.jpg”]

a[href$=".jpg"] {
    border-bottom: 1px dotted black;
}

E se quisermos estilizar todos os links que apontam, digamos, para uma foto? Nesses casos, temos de pesquisar pelo final da cadeia de caracteres. Nós usaremos um símbolo de expressão regular, o $, para referenciar o final da cadeia de caracteres. Nesse caso, nós buscaremos por todas as âncoras que apontem para uma imagem – ou, pelo menos, uma URL que termine com .jpg (atente-se que neste caso não afetará gif e png, por exemplo).

Compatibilidade

• IE7+
• Firefox
• Chrome
• Safari
• Opera

14. X[data-*=”foo”]

a[data-filetype="image"] {
    border-bottom: 1px dotted black;
}

Lembre-se do exemplo treze; como fazer para referenciar todos os tipos de imagens: png, jpeg,jpg e gif? Bem, poderíamos criar múltiplos seletores, dessa forma:

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
    border-bottom: 1px dotted black;
}

Mas isso é muito chato e ineficiente. Outra possível solução é usar atributos customizados. Por exemplo, podemos adicionar um atributo data-filetype a cada uma das âncoras que apontem para uma imagem, desta forma:

<a href="path/to/image.jpg" data-filetype="image">Link para Imagem</a>

Então, com esse gancho, podemos usar os seletores de atributo padrão para selecionar somente essas âncoras.

a[data-filetype="image"] {
    border-bottom: 1px dotted black;
}

Compatibilidade

• IE7+
• Firefox
• Chrome
• Safari
• Opera

15. X[foo~=”bar”]

a[data-info~="external"] {
    color: #f00;
}
a[data-info~="image"] {
    border-bottom: 1px solid #f00;
}

Este é um seletor especial bem impressionante. Nem todo mundo sabe desse truque. O til (~) permite-nos selecionar um atributo que tem, em seus valores, uma lista separada por espaços.

Seguindo com o nosso atributo customizado do exemplo anterior, poderíamos criar um atributo data-info, que pode receber uma lista de itens, separados por espaço, para podermos anotar o que quisermos. Nesse caso, nós tomaremos nota dos links externos e dos links para imagens – só para exemplificar.

<a href="path/to/image.jpg" data-info="external image">Clique em mim</a>

Com esse código, agora podemos selecionar qualquer tag que tenha qualquer um desses valores, usando o truque do seletor de atributos com o ~.

/* Seleciona o atributo data-info que contem o valor "external" */
a[data-info~="external"] {
    color: #f00;
}

/* E aquele que contem o valor "image" */
a[data-info~="image"] {
    border-bottom: 1px solid #f00;
}

Compatibilidade

• IE7+
• Firefox
• Chrome
• Safari
• Opera

16. X:checked

input[type=radio]:checked {
    border: 1px solid green;
}

Essa pseudo-classe somente selecionará o elemento da interface que foi marcado como selecionado – como um botão radio ou checkbox. Simples assim.

Compatibilidade

• IE9+
• Firefox
• Chrome
• Safari
• Opera

17. X:before e X:after

As pseudo-classes before e after são muito boas. Parece que, todos os dias, o pessoal encontra maneiras criativas e efetivas de usá-las. Elas simplesmente geram conteúdo ao redor do elemento selecionado. Eu particularmente gosto muito de usá-las.

Vários aprenderam sobre eles quando foram encontrar o hack do ajuste dos floats (alguns conhecem como clear-fix hack).

.clearfix:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0;
  }
 
.clearfix {
 *display: inline-block;
 _height: 1%;
}

Esse hack usa a pseudo-classe :after para adicionar um espaço após o elemento e, então, limpa-lo. É um ótimo truque para se ter em seu cinto de utilidades, principalmente quando a técnica do overflow: hidden; não é possível ser utilizada.

De acordo com a especificação dos Seletores CSS3, você deveria, tecnicamente, usar a sintaxe dos pseudo-elementos de dois “dois pontos”, ::. Entretanto, para manter-se compatível, o navegador aceita o uso com um único “dois pontos”. Na verdade, é melhor você usar a versão com um único “dois pontos” em seus projetos.

Compatibilidade

• IE8+
• Firefox
• Chrome
• Safari
• Opera

18. X:not(selector)

div:not(.container) {
    border-color: #aaa;
}

A pseudo-classe negação é, ao meu ver, muito útil. Digamos que você queira selecionar todas as divs, exceto por aquelas que contenham uma class nomeada de container. O trecho acima lida com essa tarefa perfeitamente.

Ou, se você quiser selecionar todos os elementos (o que não é recomendado), exceto pelas tags de parágrafo, poderíamos fazer assim:

*:not(p) {
    color: blue;
}

li:nth-child(3) {
    font-size: 2em;
}

Você se lembra quando tinha de indicar um elemento específico de um conjunto de elementos? a pseudo-classe nth-child acaba com esse problema!

Atente que o nth-child aceita um número inteiro como parâmetro, entretanto, a contagem não inicia em zero (como nas arrays e strings em programação). Se você deseja selecionar o segundo item de uma lista, faça assim li:nth-child(2).

Nós podemos, até mesmo, selecionar um número variável de elementos filhos. Por exemplo, nós podemos fazer algo como li:nth-child(4n), para selecionar todos os itens que estejam em uma posição que seja múltipla de quatro.

Compatibilidade

• IE9+
• Firefox 3.5+
• Chrome
• Safari

20. X:nth-last-child(n)

li:nth-last-child(2) {
    font-weight: bold;
}

E se tivéssemos uma enorme lista de itens em uma ul e só precisássemos acessar o terceiro item, começando a contagem a partir do último elemento? Ao invés de fazer algo como li:nth-child(397), você pode usar a pseudo-classe nth-last-child.

Essa técnica funciona quase igual à técnica anterior, entretanto, a diferença é que ela começa do último elemento do conjunto e faz o caminho inverso até o primeiro elemento.

Compatibilidade

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

21. X:nth-of-type(n)

ul:nth-of-type(3) {
    border: 1px dashed black;
}

Haverá vezes que, ao invés de selecionar um elemento filho, você precisará de um certo elemento de um certo tipo.

Imagine um código que contenha cinco listas não ordenadas. Se você quiser estilizar, somente, a terceira ul e não tem um identificador ou classe para usar, você pode usar a pseudo-classe nth-of-type(n). No trecho acima, somente a terceira ul terá uma borda.

Compatibilidade

• IE9+
• Firefox 3.5+
• Chrome
• Safari

22. X:nth-last-of-type(n)

ul:nth-last-of-type(3) {
    border: 1px dashed black;
}

E, sim, para manter a consistência, nós também podemos usar a pseudo-classe nth-last-of-type para iniciar a contagem dos seletores pelo fim da lista e fazer o caminho inverso até o elemento desejado.

Compatibilidade

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

23. X:first-child

ul li:first-child {
    border-top: none;
}

Essa pseudo-classe estrutural permite-nos selecionar o primeiro elemento do conjunto alvo. Você, geralmente, usará essa técnica para remover bordas dos primeiros e últimos elementos de listas.

Por exemplo, digamos que você tem uma lista e cada item dessa lista tem border-top e border-bottom. Bem, com esse arranjo, o primeiro e último elementos parecerão um pouco estranhos.

Muitos projetistas aplicam classes chamadas primeira e última para compensar isso. Para evitar esse tipo de coisa, você pode usar essa pseudo-classe.

Compatibilidade

• IE7+
• Firefox
• Chrome
• Safari
• Opera

24. X:last-child

ul last-child {
    border-bottom: none;
}

O seletor oposto ao first-child, o last-child, selecionará o último item do conjunto alvo.

Compatibilidade

• IE9+
• Firefox
• Chrome
• Safari
• Opera

SIM – o IE8 dá suporte ao :first-child, mas não ao :last-child. Vai entender.

Conclusão

Se você ainda tem de lidar com navegadores antigos, como o Internet Explorer 6, você tem que tomar cuidado com esses novos seletores. Porém, não deixe isso deter seu aprendizado. Você estaria fazendo um desserviço a você mesmo. Tenha certeza de visualizar a lista de compatibilidade com os navegadores. Alternativamente, você pode usar o excelente script IE9.js do Dean Edward, para permitir que esses seletores sejam usados em navegadores.

Segundo, quando for trabalhar com bibliotecas, como a popular jQuery, sempre use os seletores nativos do CSS3 ao invés dos métodos/seletores customizados da biblioteca, sempre que possível. Isso fará seu código mais performático, uma vez que o motor de seleção poderão usará o analisador nativo do navegador, ao invés do seu próprio.

Fonte: tutsplus.com