Seletores CSS – O que são e como aplicá-los

Se você pretende aprender tudo sobre Seletores CSS hoje, você veio ao lugar certo! Para que possamos aplicar qualquer tipo de estilização é necessário definir quais os elementos que serão afetados. A forma que isso ocorre é com a utilização de seletores.

É comum a utilização de alguns seletores css, como nome de tag, utilização de classes e ids, seleção de todos os elementos que estão aninhados a outras tags. Mas o CSS possui muitos mais seletores.

Vamos conhecer alguns deles.

Seletores CSS – Atributos

Todos elementos HTML pode possui meta informações, que são os atributos. Você pode trabalhar com CSS, para realizar seleções baseados nesses atributos, desde sua existência ou valores.

E[ATTR]

Podemos selecionar o elemento que possui um determinado atributo.

E[ATTR=”VALOR”]

Outra possibilidade é selecionar o atributo com um valor especifico.

E[ATTR$=”VALOR”]

Você também consegue a seleção via atributo definido que termine com um determinado valor.

Seletores – Pseudo-classe

Com pseudo-classe, você consegue recuperar um estado de um elemento, aplicando assim algum estilo ou selecionando algum elemento na sua forma estrutural

E:HOVER

Talvez seja o mais comum que todos utilizam. Quando passa o mouse sobre o elementos, altera algum estilo.

E:NTH-CHILD(N)

Você recupera um elemento filho, baseado numa posição ao elemento pai e irmãos. Você consegue selecionar atribuindo um valor especifico, como img:nth-child(2), pegando o segundo elemento, ou parte de uma fórmula,como img:nth-child(2n+1). Basta substituir o valor de n, começando com 0, e você verá os elementos que irão selecionar:

2n + 1 = 2 * 0 + 1 = 1
2n + 1 = 2 * 1 + 1 = 3 

E:LAST-CHILD

Você consegue selecionar o último elementos filho.

E:ENABLED E E:DISABLED

Seleciona o elementos de formulários que estão habilitados e desabilitados.

E:NOT(VALOR)

Seleciona os elementos que sejam diferentes do valor especificado.

Seletores  – Pseudo-elementos

Com os pseudos-elementos, você consegue selecionar partes de um elemento. Para diferenciar dos pseudo-classes, são utilizados :: ao invés de  :

E::FIRST-LETTER

Você consegue selecionar a primeira letra do elemento.

E::BEFORE E E::AFTER

Com ::before você consegue gerar conteúdo antes de elementos, e com ::after, gerar depois dos elementos.

Esses são alguns Seletores CSS que você pode utilizar em seus projetos. Existem diversos outros Seletores CSS que podem ser bastante úteis em determinar em quais elementos usar em algum efeito ou estilo. As vezes você precisa recorrer algum código Javascript, entretanto, muitas vezes conseguimos resolver tudo apenas com Seletores CSS.

Um abraço e até a próxima!