Guia completo dos Seletores CSS3
PadrĂ£o | Casa com | Tipo | CSS |
---|---|---|---|
* | qualquer elemento | Seletor universal | 2 |
E | elementos do tipo E | Seletor tipo | 1 |
E[foo] | elementos com o atributo "foo" | Seletor atributo | 2 |
E[foo="bar"] | elementos E cujo valor do atributo "foo" é exatamente igual a "bar" | Seletor atributo | 2 |
E[foo~="bar"] | elementos E cujo valor do atributo "foo" é uma lista de valores separados por espaço, um dos quais é exatamente igual a "bar" | Seletor atributo | 2 |
E[foo^="bar"] | elementos E cujo valor do atributo "foo" começa exatamente com a string "bar" | Seletor atributo | 3 |
E[foo$="bar"] | elementos E cujo valor do atributo "foo" termina exatamente com a string"bar" | Seletor atributo | 3 |
E[foo*="bar"] | elementos E cujo valor do atributo "foo" contém a substring "bar" | Seletor atributo | 3 |
E[foo|="en"] | elementos E cujo atributo "foo" tem uma lista de valores começando com "en" e seguida por um hífen | Seletor atributo | 2 |
E:root | elemento E raiz do documento | Pseudo-classe estrutural | 3 |
E:nth-child(n) | elemento E que é o enésimo filho do seu elemento pai | Pseudo-classe estrutural | 3 |
E:nth-last-child(n) | elemento E que é o enésimo filho (contado de trás para frente) do seu elemento pai | Pseudo-classe estrutural | 3 |
E:nth-of-type(n) | elemento E que é o enésimo irmão do seu tipo | Pseudo-classe estrutural | 3 |
E:nth-last-of-type(n) | elemento E que é o enésimo irmão (contado de trás para frente) do seu tipo | Pseudo-classe estrutural | 3 |
E:first-child | elemento E que é o primeiro filho de seu elemento pai | Pseudo-classe estrutural | 2 |
E:last-child | elemento E que é o último filho de seu elemento pai | Pseudo-classe estrutural | 3 |
E:first-of-type | elemento E que é o primeiro irmão de seu tipo | Pseudo-classe estrutural | 3 |
E:last-of-type | elemento E que é o último irmão de seu tipo | Pseudo-classe estrutural | 3 |
E:only-child | elemento E que é o único filho de seu elemento pai | Pseudo-classe estrutural | 3 |
E:only-of-type | elemento E que é irmão único do seu tipo | Pseudo-classe estrutural | 3 |
E:empty | elemento E que não tem elementos filhos (inclusive nós de texto) | Pseudo-classe estrutural | 3 |
E:link E:visited |
elemento E que sendo destino de um link ainda não foi visitado (:link) ou que já tenha sido visitado (:visited) | Pseudo-classe link | 1 |
E:active E:hover E:focus |
elemento E durante determinadas ações do usuário | Pseudo-classe ação do usuário | 1 e 2 |
E:target | elemento E que é o destino de um fragmento identificador de um URI | Pseudo-classe :target | 3 |
E:lang(pt-br) | elemento E em um determinado idioma - "exemplo: pt-br" | Pseudo-classe :lang() | 2 |
E:enabled E:disabled |
elemento E de uma interface de usuário que está habilitado (:enabled) ou desabilitado (:disabled) | Pseudo-classe estado do elemento UI | 3 |
E:checked | elemento E de uma interface de usuário que está marcado (:checked) (por exemplo: radio-button ou checkbox) | Pseudo-classe estado do elemento UI | 3 |
E::first-line | primeira linha formatada do elemento E | Pseudo-elemento ::first-line | 1 |
E::first-letter | primeira letra formatada do elemento E | Pseudo-elemento ::first-letter | 1 |
E::before | conteúdo gerado antes do elemento E | Pseudo-elemento ::before | 2 |
E::after | conteúdo gerado depois do elemento E | Pseudo-elemento ::after | 2 |
E.foo | elemento E cujo valor da classe é "foo" | Seletor classe | 1 |
E#foo | elemento E cujo valor do atributo ID é "foo". | Selector ID | 1 |
E:not(seletor) | elemento E que não casa com o seletor simples seletor | Pseudo-classe negação | 3 |
E F | elemento F descendente do elemento E | Elemento descendente | 1 |
E > F | elemento F filho do elemento E | Elemento filho | 2 |
E + F | elemento F imediatamente precedido pelo elemento E | Elemento irmão adjacente | 2 |
E ~ F | elemento F precedido pelo elemento E | Elemento irmão geral | 3 |
Fonte: Site do Maujor (https://maujor.com)