Lista de Pseudo-classe, Pseudo-elemento e Seletores CSS
| Seletor | Exemplo | Descrição |
|---|---|---|
| * | * | Seleciona todos os elementos |
| element > element | div > p | Seleciona todas as tags onde o pai é uma tag |
| element + element | div + p | Seleciona todas as tags que estão imediatamente as tags |
| element1 ~ element2 | p ~ h2 | Seleciona cada tag que são precedidos por uma tag |
| [atributo] | [target] | Seleciona todos os elementos com um atributo target |
| [atributo=valor] | [target=_blank] | Seleciona todos os elementos com target="_blank" |
| [atributo~=valor] | [title~=flower] | Seleciona todos os elementos com um atributo title com o valor "Webship" |
| [atributo|=valor] | [lang|=pt-br] | Seleciona todos os elementos com o atributo lang começando com o valor "pt-br" |
| :lang(language) | p:lang(pt-br) | Seleciona cada elemento com um atributo lang igual a "pt-br" (Português do Brasil) |
| [atributo^=valor] | a[href^="https"] | Seleciona cada tag cujo valor do atributo href começa com "https" |
| [atributo$=valor] | a[href$=".pdf"] | Seleciona cada tag cujo valor do atributo href termina com ".pdf" |
| [atributo*=valor] | span[class*="content-"] | Seleciona cada tag cujo valor do atributo class contém a string "content-" |
| :hover | a:hover | Seleciona links ao passar o mouse |
| ::after | #cart::after | Insere algo após o conteúdo do elemento |
| ::before | #cart::before | Insere algo antes o conteúdo do elemento |
| :checked | input:checked | Seleciona cada tag type checked |
| :disabled | input:disabled | Seleciona cada tag com o atributo disabled |
| :empty | p:empty | Seleciona cada elemento que não tem filhos (incluindo nós de texto) |
| :enabled | input:enabled | Seleciona cada tag com o atributo enabled |
| :first-child | li:first-child | Seleciona cada tag |
| :last-child | li:last-child | Seleciona cada tag |
| ::first-letter | li::first-letter | Seleciona a primeira letra de cada |
| ::first-line | li::first-line | Seleciona a primeira linha de cada tag |
| :first-of-type | li:first-of-type | Selecionado cada elemento |
| :last-of-type | li:last-of-type | Selecionado cada elemento |
| :focus | input:focus | Seleciona o elemento de entrada que tem foco |
| :in-range | input:in-range | Seleciona elementos de entrada com um valor dentro de um intervalo especificado |
| :out-of-range | input:out-of-range | Seleciona elementos de entrada com um valor fora de um intervalo especificado |
| :invalid | input:invalid | Seleciona todos os elementos de entrada com um valor inválido |
| :not(selector) | :not(p) | Seleciona todos os elementos que não são elemento |
| :nth-child(n) | p:nth-child(2) | Seleciona todo elemento que é o segundo filho de seu pai |
| :nth-of-type(n) | p:nth-of-type(2) | Seleciona cada elemento que é o segundo elemento de seu pai |
| :nth-last-child(n) | p:nth-last-child(2) | Seleciona cada elemento que é o segundo filho de seu pai, contando a partir do último filho |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Seleciona cada elemento que é o segundo elemento de seu pai, contando a partir do último filho |
| :only-of-type | p:only-of-type | Seleciona cada elemento que é o único elemento de seu pai |
| :only-child | p:only-child | Seleciona cada elemento que é o único filho de seu pai |
| :optional | input:optional | Seleciona elementos de entrada sem nenhum atributo "required" (obrigatório) |
| :read-only | input:read-only | Seleciona elementos de entrada com o atributo "readonly" especificado |
| :read-write | input:read-write | Seleciona elementos de entrada com o atributo "readonly" não especificado |
| :required | input:required | Seleciona elementos de entrada (input) com o atributo "required" especificado |
| :root | :root | Seleciona o elemento raiz do documento |
| ::selection | ::selection | Seleciona a parte de um elemento que é selecionado por um usuário |
| :target | #top:target | Seleciona o elemento #top ativo atual (clicado em uma URL contendo o nome da âncora) |
| :valid | input:valid | Seleciona todos os elementos de entrada com um valor válido |