Fundamentos de Seleção de Elementos

Os seletores constituem a base para aplicação de regras de estilo em documentos HTML, identificando quais elementos receberão as propriedades definidas nas folhas de estilo.

Seletores de Elemento

O método mais direto envolve selecionar tags HTML específicas. Por exemplo, para alterar a tipografia de todos os parágrafos:

p {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

O asterisco * funciona como um caractere curinga, aplicando regras a todos os elementos da página, embora seu uso indiscriminado possa impactar a performance de renderização.

* {
    box-sizing: border-box;
}

Seletores de ID

Utilizados para estilizar elementos únicos identificados pelo atributo id. A sintaxe exige o uso do caractere # antes do nome do identificador.

<header id="topo-site"></header>

#topo-site {
    background-color: #2c3e50;
    height: 60px;
    border-bottom: 2px solid #34495e;
    padding: 10px 20px;
}

Seletores de Classe

Classes permitem agrupar elementos que compartilham características visuais, definidas pelo atributo class. O seletor utiliza o ponto . como prefixo.

<div class="cartao destaque"></div>

.align-center {
    max-width: 80%;
    margin: 0 auto;
}

Um único elemento pode possuir múltiplas classes, herdando estilos de todas elas simultaneamente.

Agrupamento de Seletores

Para evitar repetição de código, múltiplos seletores podem compartilhar a mesma declaração de estilo, sendo separados por vírgulas.

h1, h2, h3, .titulo-secao, #cabecalho {
    color: #333333;
    font-weight: bold;
}

Seletores Combinadores

Descendente

Seleciona elementos aninhados em qualquer nível abaixo do elemento pai especificado.

section p {
    color: #555;
}

Isto afeta todos os parágrafos dentro de uma section, independentemente da profundidade da hierarquia.

Filho Direto

O combinador > restringe a seleção apenas aos filhos imediatos, ignorando descendentes mais profundos.

nav > a {
    text-decoration: none;
    color: white;
}

Irmão Adjacente

O sinal + seleciona o elemento que segue imediatamente outro específico no mesmo nível hierárquico.

h2 + p {
    margin-top: 0;
    font-style: italic;
}

Pseudo-classes

Permitem estilizar elementos baseados em seu estado interativo ou posição estrutural, sem necessidade de adicionar classes extras ao HTML.

a:link {
    color: blue;
}
a:visited {
    color: purple;
}
a:hover {
    color: orange;
    text-decoration: underline;
}
a:active {
    color: red;
}

Também é possível combinar pseudo-classes com seletores de classe para aumentar a especificidade da regra.

button.primary:hover {
    background-color: #0056b3;
}

Pseudo-elementos

Utilizados para estilizar partes específicas de um elemento ou inserir conteúdo gerado via CSS. A sintaxe moderna recomenda o uso de dois pontos duplos ::.

.citação::before {
    content: "«";
    color: gray;
}
.citação::after {
    content: "»";
    color: gray;
}

É possível inserir imagens ou outros conteúdos dinâmicos usando a propriedade content com valores adequados.

Seletores de Atributo

Permitem selecionar elementos baseados na presença ou valor de atributos HTML específicos.

Referência Rápida de Seletores