Ficha informativa de seletores de CSS

Artigo original: CSS Selectors Cheat Sheet

No CSS, seletores são padrões usados para selecionar elementos do DOM.

Aqui temos um exemplo de uso dos seletores. No código a seguir, a e h1 são seletores:

a {
  color: black;
}

h1 {
  font-size 24px;
}

Ficha informativa dos seletores comuns

head seleciona o elemento com a tag head

.red seleciona todos os elementos com a classe "red"

#nav seleciona os elementos com o id "nav"

div.row seleciona todos os elementos com a tag div e a classe "row"

[aria-hidden="true"] seleciona todos os elementos com o atributo aria-hidden cujo valor é "true"

• Seletor coringa (*) seleciona todos os elementos do DOM. Veja abaixo para o uso de outros seletores

Podemos combinar seletores de modos interessantes

Alguns exemplos:

li a combinador descendente do DOM. Todos os elementos com a tag a que são filhos de elementos com a tag li

div.row * seleciona todos os elementos que são descendentes (ou filhos) dos elementos com a tag div e a classe "row"

li > a combinador de diferença. Seleciona descendentes diretos, em vez de todos os descendentes como os seletores de descendentes

li + a combinador adjacente. Seleciona o elemento que precede imediatamente o elemento anterior. Neste caso, somente o primeiro a após cada li.

li, a seleciona todos os elementos a e todos os elementos li.

li ~ a o combinador de irmãos. Seleciona o elemento a que segue um elemento li.

Pseudosseletores ou classes pseudoestruturais

Esses elementos também são úteis para selecionar elementos estruturais do DOM.

Aqui temos alguns deles:

:first-child seleciona o primeiro elemento imediatamente dentro de outro elemento (filho desse elemento)

:last-child seleciona o último elemento imediatamente dentro de outro elemento (filho desse elemento)

:nth-child() seleciona o n-ésimo elemento imediatamente dentro de outro elemento (filho desse elemento). Admite inteiros, even, odd ou fórmulas

a:not(.name) seleciona todos os elementos a que não sejam da classe .name

::after permite a inserção de conteúdo em uma página a partir do CSS, em vez do HTML. Embora o resultado final não esteja de fato no DOM, ele aparece na página como se estivesse. Esse conteúdo carrega após os elementos do HTML.

::before permite a inserção de conteúdo em uma página a partir do CSS, em vez do HTML. Embora o resultado final não esteja de fato no DOM, ele aparece na página como se estivesse. Esse conteúdo carrega antes dos elementos do HTML.

Podemos usar as pseudoclasses para definir um estado especial de um elemento do DOM. No entanto, eles não apontam para um elemento por eles mesmos.

Alguns exemplos:

:hover seleciona um elemento que sobre o qual o ponteiro do mouse se encontra

:focus seleciona um elemento que recebe o foco a partir do teclado ou de modo programático

:active seleciona um elemento que esteja sendo clicado por um ponteiro de mouse

:link seleciona todos os links que ainda não foram clicados

:visited seleciona um link que já foi clicado

Mais informações sobre o seletor nth-child

O seletor nth-child é uma pseudoclasse de CSS recebendo um padrão por onde corresponder um ou mais elementos relativos a sua posição entre irmãos.

Sintaxe

  a:nth-child(padrão) {
    /* O CSS vai aqui */
  }

Padrão

Os padrões aceitos por nth-child podem ser na forma de palavras-chave ou uma equação na forma An+B.

Palavras-chave

odd

odd retorna todos os elementos ímpares de um tipo determinado.

  a:nth-child(odd) {
    /* O CSS vai aqui */
  }

even

even retorna todos os elementos pares de um tipo determinado

  a:nth-child(even) {
    /* O CSS vai aqui */
  }

An+B

Retorna todos os elementos correspondendo à equação An+B para cada valor inteiro positivo de n (além de 0).

Por exemplo, o que vemos abaixo corresponderá a cada 3º elemento âncora:

  a:nth-child(3n) {
    /* O CSS vai aqui */
  }

Jogos

CSS Diner é um jogo da web que ensina quase tudo o que é preciso saber sobre a combinação de seletores.

Referências adicionais

Existem muitos seletores de CSS! Saiba mais sobre eles em CodeTuts (em inglês), CSS-tricks.com (em inglês) ou na Mozilla Developer Network.