Aprenda sobre os fundamentos dos seletores CSS para estilização eficiente de páginas da web. Este guia abrange seletores básicos, como seleção por tag, classe e ID, junto com seletores por atributo e o uso do seletor universal. Além disso, explora os combinadores, incluindo seletores de elementos adjacentes, irmãos, filhos e descendentes, com exemplos práticos para ilustrar cada conceito.
Seletores Básicos
1. Seletor por Tag
Seleciona todos os elementos que possui o nome fornecido.
Exemplo, para selecionar todas as <div>:
2. Seletor por Classe
Seleciona todos os elementos baseados no conteúdo do atributo class, classes podem ser usadas em vários elementos.
Exemplo, para selecionar todos com class="valor-da-classe":
3. Seletor por Id
Seleciona todos os elementos baseados no conteúdo do atributo id, vale ressaltar que é recomendado que id seja único.
Exemplo, para selecionar todos com id="valor-do-id":
4. Seletor por atributo
Seleciona todos os elementos baseados no valor de um dos atributos do elemento ou no próprio atributo.
Exemplo, para selecionar todos com atributo="valor-do-atributo":
5. Seletor universal
O seletor universal seleciona todos os elementos sem exceção.
Exemplo:
Combinadores
1. Seletor de elementos adjacentes
O combinador + seleciona o primeiro elemento que vem logo apos o elemento anterior.
Exemplo, A + B onde o elemento B imediatamente após A é selecionado:
2. Seletor de elementos irmãos
O combinador ~ seleciona todos os elementos que vem apos o elemento anterior, desde que faça parte do mesmo elemento pai.
Exemplo, A ~ B onde os elementos B sendo irmão de A são selecionados:
3. Seletor de filhos
O combinador > seleciona o filho direto do elemento anterior especificado.
Exemplo, A > B onde o elemento B sendo filho direto de A é selecionado:
4. Seletor de descendentes
Esse combinador em apenas um espaço, que representa que todos os filhos do elemento pai serão selecionados, diretos e indiretos.
Exemplo, A B onde todos os filhos B diretos e indiretos serão selecionados:
5. Adicionar mais elementos ao conjunto de regras
Para adicionar mais elementos no mesmo estilo, basta separa-los com vírgula.
Exemplo: A, B onde A e B usarão o mesmo estilo:
Esse são os seletores básicos do CSS cruciais para estilizar suas paginas web.