Todos os seletores CSS comuns, agrupados por família: básicos, combinadores, pseudo-classes, pseudo-elementos e seletores de atributo. Cada linha associa o seletor a um exemplo de uma linha.
Um seletor escolhe os elementos a que uma regra se aplica. A especificidade decide qual regra vence quando várias coincidem: inline vence id, id vence classe, classe vence tipo. Leia os seletores da direita para a esquerda: o navegador avalia primeiro a parte mais à direita e depois percorre os combinadores. As famílias abaixo cobrem quase tudo o que vai escrever.
Tabela de referência · 53 entradas
Seletores CSSExplained
53 of 53 rows
Básicos
Todos os elementos dessa tag.
button { }
Elementos com essa classe.
.active { }
O único elemento com esse id.
#header { }
Todos os elementos.
* { box-sizing: border-box; }
A raiz do documento; o sítio habitual para propriedades personalizadas globais.
:root { --gap: 1rem; }
Elementos correspondidos por A ou por B (agrupamento).
h1, h2, h3 { }
Combinadores
Qualquer B descendente de A.
nav a { }
B que é filho direto de A.
ul > li { }
B imediatamente a seguir a A, com o mesmo pai.
h1 + p { }
Todo o B que segue A, com o mesmo pai.
h1 ~ p { }
Pseudo-classes (estado)
O elemento enquanto o ponteiro está sobre ele.
a:hover { }
O elemento que tem o foco do teclado.
input:focus { }
Um elemento que é o primeiro filho do seu pai.
li:first-child { }
O n-ésimo filho; aceita fórmulas como 2n.
tr:nth-child(2n) { }
Elementos que não correspondem a nenhum seletor interno; aceita uma lista desde os Selectors 4.
li:not(:first-child, .skip) { }
Uma checkbox, radio ou opção marcada.
input:checked { }
Um input ou botão desativado.
button:disabled { }
Um pai que contém uma correspondência para o seletor interno.
li:has(ul) { }
Qualquer seletor da lista; a especificidade é a mais alta da lista.
:is(ol, ul) li { }
O mesmo que :is(), mas com especificidade zero.
:where(ol, ul) li { }
Foco que deve mostrar um anel, normalmente vindo do teclado.
a:focus-visible { }
Um elemento que ele próprio ou um descendente tem o foco.
form:focus-within { }
Um elemento que é o último filho do seu pai.
li:last-child { }
Um elemento sem irmãos.
p:only-child { }
O n-ésimo irmão da mesma tag; aceita fórmulas como 2n.
p:nth-of-type(2n) { }
O primeiro ou o último irmão da mesma tag.
p:first-of-type { }
Um elemento sem filhos e sem texto.
td:empty { }
Ligações não visitadas e ligações já visitadas.
a:visited { }
Inputs marcados como obrigatórios e inputs deixados opcionais.
input:required { }
Inputs cujo valor passa ou falha as suas regras de validação.
input:invalid { }
Um input que o utilizador não pode editar.
input:read-only { }
O elemento cujo id corresponde ao fragmento do URL.
#note:target { }
A opção pré-selecionada ou o botão predefinido de um grupo.
input:default { }
Uma checkbox colocada em estado indeterminado por script.
input:indeterminate { }
Qualquer elemento nativo, ou um elemento personalizado assim que registado.
my-widget:defined { }
Um elemento no idioma indicado.
p:lang(fr) { }
Pseudo-elementos
Um nó de conteúdo gerado antes do elemento.
label::before { content: ""; }
Um nó de conteúdo gerado depois do elemento.
code::after { content: ";"; }
A primeira letra de um bloco de texto.
p::first-letter { }
O texto de marca de um input.
input::placeholder { }
A primeira linha de um bloco de texto.
p::first-line { }
O texto que o utilizador destacou.
::selection { }
O marcador ou o número de um item de lista.
li::marker { }
A área atrás de um elemento em ecrã inteiro ou de um diálogo.
dialog::backdrop { }
O botão de procurar dentro de um input de ficheiro.
input::file-selector-button { }
Uma part do shadow DOM exposta pelo host.
my-widget::part(header) { }
Seletores de atributo
Elementos que têm o atributo, com qualquer valor.
[required] { }
O atributo é exatamente igual a val.
[type="submit"] { }
O atributo começa por val.
a[href^="https"] { }
O atributo termina em val.
a[href$=".pdf"] { }
O atributo contém val.
a[href*="login"] { }
Uma lista separada por espaços que inclui val.
[class~="badge"] { }
O valor é igual a val ou começa por val seguido de hífen.