Seletores complexos

Formatando elementos fora do fluxo normal do DOM

Selecionando diferentes elementos de um formulário

Tipos de Inputs

input[type="text"] { ... }
input[type="email"] { ... }

No exemplo acima, selecionamos respectivamente elementos input do tipo text e email.

Input checkbox

input[type="checkbox"]:checked { ... }

A própria declaração é bem intuitiva. Seleciona elementos do tipo checkobx que estiverem selecionado (ou ticados).

Input inativo

input:disabled { ... }

Acima, selecionamos um input que esteja com o atributo disabled, estando assim inativo.

Selecionamento elementos pela extensão do arquivo

:lang(en) .flag { ... }

No exemplo, selecionamos o elemento com a classe .flag que é filho de uma página que possui o valor en.

a[href$=".jpg"] { ... }
a[href$=".pdf"] { ... }

Imagine uma lista de arquivos e que você precisa adicionar um ícone ou aplicar um estilo diferente de acordo com o tipo de arquivo em cada link. Com os seletores acima você consegue sem a necessidade de adicionar uma classe para cada um.

Selecionando elementos pelo target

#element-id:target { ... }

Elementos com âncora linkam o usuário a outras partes da página. Então o elemento acima seria selecionado quando seu id aparecesse na URL do usuário. Geralmente depois de um clique.

Selecionando elementos pelo atributo

Existem seis maneiras diferentes de selecionarmos elementos por seus atributos:

[att=valor]

O atributo tem exatamente o mesmo valor especificado.

[att~=valor]

O valor do atributo precisar ser uma lista de valores com espaço. Por exemplo class="box box-color box-sidebar", e um dos valores precisa ser exatamente igual ao valor que foi especificado.

[att|=valor]

O atributo possui exatamente o mesmo valor que foi especificado ou é imediatamente seguindo de um traço. Dessa maneira, uma classe válida seria valor-X.

[att^=valor]

O valor do atributo começa com o valor que foi especificado na regra.

[att$=valor]

O valor do atributo termina com o valor que foi especificado na regra.

[att*=valor]

O valor do atributo contém o valor do atributo especificado na regra.

Selecionando elementos pela negação

div:not(.estilo) { ... }

Acima, selecionamos todas as divs do documento, exceto as que possuem a classe .estilo.