Guia rápido de seletores CSS: testador ao vivo, nth-child, ::before | We.Inc
Digite qualquer seletor CSS e veja quais elementos ele seleciona em uma página de exemplo, com a especificidade. Inclui todos os grupos de seletores, uma calculadora de fórmulas nth-child, receitas de ::before e ::after e :has().
Os seletores dizem ao CSS a quais elementos uma regra se aplica. Os principais são o de tipo (p), de classe (.card), de ID (#main), de atributo ([type=email]), os combinadores (descendente com espaço, filho >, irmãos + e ~), pseudo-classes como :hover e :nth-child(2n) e pseudo-elementos como ::before. Digite um seletor abaixo para ver o que ele seleciona.
Os seletores por trás da maioria das folhas de estilo
Seletor
Seleciona
Especificidade
Todo elemento p
.card
Elementos com a classe card
O elemento com id main
nav a
a em qualquer lugar dentro de nav
ul > li
li que são filhos diretos de ul
a:hover
Um link sob o ponteiro
Ler uma tabela de seletores só ajuda até certo ponto. O testador abaixo passa o seu seletor pelo próprio motor do navegador em uma pequena página de exemplo, destaca cada elemento selecionado, explica entradas inválidas e calcula a especificidade. A calculadora logo abaixo responde à eterna pergunta de quais itens 3n+1 realmente pega.
Digite um seletor no testador, ou clique em um dos exemplos para carregá-lo.
Os elementos selecionados na página de exemplo se acendem, e a contagem é atualizada enquanto você digita.
Leia a especificidade como três números: IDs, depois classes e similares, depois tipos de elemento.
Use a calculadora de nth-child para testar qualquer fórmula An+B em uma lista de até 30 itens.
Estilize com classes em vez de IDs. Uma classe mantém a especificidade baixa, então regras posteriores e classes utilitárias ainda conseguem sobrescrevê-la.
Use :focus-visible em vez de :focus para os anéis de foco. Ele mostra o anel para quem usa o teclado sem piscar a cada clique do mouse.
::before e ::after precisam da propriedade content, mesmo que seja uma string vazia, ou não são gerados.
Envolva listas longas de seletores em :is() para encurtá-las, ou em :where() quando quiser que tenham especificidade zero.
Perguntas frequentes
Qual é a diferença entre nth-child e nth-of-type?
:nth-child(2) conta todos os elementos irmãos e depois verifica se o segundo também corresponde ao resto do seletor. :nth-of-type(2) conta apenas os irmãos com a mesma tag. Assim, p:nth-child(2) não seleciona nada se o segundo filho for um h2, enquanto p:nth-of-type(2) ainda encontra o segundo parágrafo.
Qual é a diferença entre ::before e :before?
São o mesmo pseudo-elemento. Os dois-pontos duplos foram introduzidos para diferenciar pseudo-elementos de pseudo-classes, e os navegadores ainda aceitam os dois-pontos simples nos quatro mais antigos (before, after, first-line, first-letter) por compatibilidade. Use os dois-pontos duplos em código novo.
O que :has() faz?
:has() seleciona um elemento com base no que ele contém ou no que vem depois dele, por exemplo .card:has(img) estiliza os cards que contêm uma imagem, e label:has(+ input:invalid) estiliza um label antes de um campo inválido. Ele é suportado em todos os principais navegadores atuais, sendo o Firefox o último a adicioná-lo, no fim de 2023.
Como a especificidade é calculada?
Conte três coisas: seletores de ID; classes, seletores de atributo e pseudo-classes; depois seletores de tipo e pseudo-elementos. Compare da esquerda para a direita, então um ID vence qualquer quantidade de classes. :where() não soma nada, enquanto :is(), :not() e :has() assumem a pontuação do seu argumento mais específico. Estilos inline e !important ficam acima de tudo isso.
Por que meu estilo de :hover não aparece no celular?
Telas sensíveis ao toque não têm estado de hover, então os navegadores ou o ignoram ou o aplicam por um instante depois de um toque. Envolva os estilos só de hover em @media (hover: hover) e garanta que tudo o que aparece no hover também possa ser acessado por toque e pelo teclado.
Como o navegador lê um seletor
Os navegadores casam seletores da direita para a esquerda. Em nav ul li a, o motor começa com todos os links da página e depois sobe verificando se há um li, um ul e um nav. Por isso a parte mais à direita, chamada de seletor-chave, é a que mais importa para a velocidade, embora em páginas normais a velocidade dos seletores raramente seja um problema real.
Uma vírgula cria uma lista de seletores, que são apenas vários seletores compartilhando uma regra. Se qualquer um deles for inválido, a regra inteira é descartada, exceto dentro de :is() e :where(), que perdoam entradas inválidas.
Pseudo-classes versus pseudo-elementos
Uma pseudo-classe, escrita com um só dois-pontos, seleciona um elemento existente em um determinado estado ou posição: :hover, :checked, :first-child, :empty. Um pseudo-elemento, escrito com dois-pontos duplos, cria ou seleciona uma parte que não é um elemento próprio no HTML: ::before, ::placeholder, ::selection, ::marker.
Só é permitido um pseudo-elemento por seletor composto, e ele precisa vir por último. O conteúdo adicionado por ::before e ::after geralmente é lido pelos leitores de tela, mas não pode ser selecionado nem copiado, então não coloque informações essenciais ali.
Mantendo a especificidade sob controle
A maioria das brigas de especificidade começa quando um ID ou uma longa cadeia de seletores aninhados vence uma regra posterior e mais simples. Nomes de classe planos, com no máximo um ou dois níveis de profundidade, deixam toda regra fácil de sobrescrever.
As camadas de cascata (@layer) oferecem outra ferramenta: regras em uma camada posterior vencem regras de uma camada anterior, independentemente da especificidade. Resets e estilos de terceiros podem ficar em uma camada baixa para que suas próprias classes sempre vençam.
Seletores básicos e de atributo
Seletores simples
Seletor
Exemplo
Seleciona
Todos os elementos
Tipo
Todos os elementos button
Classe
.price
class contém price
ID
id é checkout
Atributo presente
[disabled]
Tem o atributo, com qualquer valor
Valor exato
[type="email"]
O valor é exatamente email
Começa com
[href^="https"]
O valor começa com https
Termina com
[href$=".pdf"]
O valor termina com .pdf
Contém
[class*="btn"]
O valor contém btn em qualquer posição
Palavra na lista
[rel~="noopener"]
A lista separada por espaços inclui a palavra
Prefixo de idioma
[lang|="en"]
en ou en- seguido de qualquer coisa
Sem diferenciar maiúsculas
[href$=".PDF" i]
Seleciona .pdf, .PDF e assim por diante
Combinadores
Relações entre elementos
Combinador
Exemplo
Seleciona
Descendente (espaço)
nav a
a em qualquer profundidade dentro de nav
Filho >
ul > li
li diretamente dentro de ul
Próximo irmão +
O p logo depois de um h2
Irmãos seguintes ~
Todo p depois de um h2 com o mesmo pai
Lista de seletores ,
Qualquer um dos dois
Pseudo-classes
Estado, estrutura e lógica
Pseudo-classe
Seleciona
:hover
Sob o ponteiro do mouse
:focus
Tem foco do teclado ou programático
:focus-visible
Em foco, e o navegador decide que o anel deve aparecer
:focus-within
Ele mesmo ou um descendente tem o foco
:active
Sendo pressionado
:visited
Um link já visitado (estilização limitada por privacidade)
:checked / :disabled / :required
Controles de formulário nesse estado
:valid / :invalid / :user-invalid
Estados de validação de formulário; user-invalid espera a interação
:placeholder-shown
Um input que está mostrando o placeholder
:first-child / :last-child / :only-child
Posição entre os irmãos
:nth-child(An+B) / :nth-last-child()
Posição por fórmula, contando todos os irmãos
:nth-of-type() / :first-of-type
Posição contando só a mesma tag
:empty
Sem filhos e sem texto
:not(x)
Não corresponde a x
:is(x, y) / :where(x, y)
Corresponde a qualquer item da lista; where tem especificidade zero
:has(x)
Contém, ou é seguido por, algo que corresponde a x
:root
O elemento html
:target
O elemento cujo id está no hash da URL
Pseudo-elementos e receitas de ::before / ::after
Partes de um elemento
Pseudo-elemento
Seleciona
::before / ::after
Conteúdo gerado antes ou depois do conteúdo do elemento
::first-letter / ::first-line
A primeira letra ou a primeira linha renderizada de um bloco
::placeholder
O texto de placeholder de um input
::selection
O texto que o usuário destacou
::marker
O marcador ou número de um item de lista
::file-selector-button
O botão de um input de arquivo
::backdrop
A camada atrás de um diálogo modal ou de um elemento em tela cheia
Asterisco de obrigatório, ícone de link externo e aspas
Cada decoração fica no CSS, então o HTML continua limpo. content é obrigatório nos dois pseudo-elementos.
:hover, :focus-visible e :has() juntos
Navegue com Tab até o campo para ver o anel. O card fica vermelho só enquanto contém um email inválido.
Início
Site parceiro
Cardápio
Pratos da estação, trocados toda semana.
Pergunte sobre alérgenos.
Sopa
Salada
Risoto
Torta
Café
Nome
Observação
Testador de seletores
Seletor
Seletores de exemplo
Esse não é um seletor válido neste navegador.
{n} elemento selecionado
{n} elementos selecionados
A especificidade lê IDs, classes, tipos. O terceiro item, Risoto, tem a classe featured; o primeiro parágrafo tem o id intro.
Calculadora de nth-child
Fórmula dentro de :nth-child( )
Número de itens: {n}
Exemplos de fórmulas
Use uma forma como 2n+1, -n+3, odd, even ou um único número.