| Seletor |
Exemplo |
Descrição |
| * |
* |
Seleciona todos os elementos |
| element > element |
div > p |
Seleciona todas as tags <p> onde o pai é uma tag <div> |
| element + element |
div + p |
Seleciona todas as tags <p> que estão imediatamente as tags <div> |
| element1 ~ element2 |
p ~ h2 |
Seleciona cada tag <h2> que são precedidos por uma tag <p> |
| [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 <p> elemento com um atributo lang igual a "pt-br" (Português do Brasil) |
| [atributo^=valor] |
a[href^="https"] |
Seleciona cada tag <a> cujo valor do atributo href começa com "https" |
| [atributo$=valor] |
a[href$=".pdf"] |
Seleciona cada tag <a> cujo valor do atributo href termina com ".pdf" |
| [atributo*=valor] |
span[class*="content-"] |
Seleciona cada tag <span> 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 <div id="#cart"> |
| ::before |
#cart::before |
Insere algo antes o conteúdo do elemento <div id="#cart"> |
| :checked |
input:checked |
Seleciona cada tag <input> type checked |
| :disabled |
input:disabled |
Seleciona cada tag <input> com o atributo disabled |
| :empty |
p:empty |
Seleciona cada <p> elemento que não tem filhos (incluindo nós de texto) |
| :enabled |
input:enabled |
Seleciona cada tag <input> com o atributo enabled |
| :first-child |
li:first-child |
Seleciona cada tag <li> que é o primeiro filho de seu pai |
| :last-child |
li:last-child |
Seleciona cada tag <li> que é o último filho de seu pai |
| ::first-letter |
li::first-letter |
Seleciona a primeira letra de cada <li> elemento |
| ::first-line |
li::first-line |
Seleciona a primeira linha de cada tag <li> |
| :first-of-type |
li:first-of-type |
Selecionado cada elemento <li> que é o primeiro elemento <li> de seu pai |
| :last-of-type |
li:last-of-type |
Selecionado cada elemento <li> que é o último elemento <li> de seu pai |
| :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 <p> elemento |
| :nth-child(n) |
p:nth-child(2) |
Seleciona todo elemento <p> que é o segundo filho de seu pai |
| :nth-of-type(n) |
p:nth-of-type(2) |
Seleciona cada <p> elemento que é o segundo <p> elemento de seu pai |
| :nth-last-child(n) |
p:nth-last-child(2) |
Seleciona cada <p> 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 <p> elemento que é o segundo <p> elemento de seu pai, contando a partir do último filho |
| :only-of-type |
p:only-of-type |
Seleciona cada <p> elemento que é o único <p> elemento de seu pai |
| :only-child |
p:only-child |
Seleciona cada <p> 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 |
Comente no