Para aplicar estilos CSS a elementos HTML específicos, é necessário primeiro identificá-los. No ecossistema do CSS, a regra responsável por essa tarefa de mapeamento é denominada seletor.

Seletor de Elemento (ou Tag)

O seletor de elemento utiliza o nome da própria tag HTML para aplicar um conjunto de propriedades. Ele é ideal para definir estilos globais que devem ser seguidos por todas as instâncias de uma tag específica na página.

/* Sintaxe básica */
nome-da-tag {
    propriedade1: valor1;
    propriedade2: valor2;
}

/* Exemplo prático */
p {
    line-height: 1.6;
    color: #333;
}

A principal vantagem é a padronização rápida; o ponto negativo é a dificuldade em criar variações específicas sem afetar todos os elementos do mesmo tipo.

Seletor de Classe

Diferente das tags, as classes permitem agrupar elementos de forma arbitrária. No CSS, são identificadas por um ponto final (.) seguido do nome da classe.

.cartao-perfil {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
}

No HTML, a classe é invocada através do atributo class:

<div class="cartao-perfil">Conteúdo do usuário</div>

Boas práticas de nomenclatura:

• Utilize hifens para separar palavras (ex: menu-lateral) em vez de sublinhados (_).
• Evite iniciar nomes com números ou caracteres especiais.
• Use termos semânticos em inglês ou português que descrevam a função do elemento.

Trabalhando com Múltiplas Classes

Um único elemento HTML pode carregar diversas classes simultaneamente, permitindo a composição de estilos. As classes devem ser separadas por espaços no atributo class.

<!-- Exemplo de composição de classes -->
<button class="btn btn-sucesso btn-largo">Confirmar</button>
<button class="btn btn-perigo">Excluir</button>

Note que a prioridade do estilo não depende da ordem das classes no HTML, mas sim da ordem em que foram declaradas no arquivo CSS.

Seletor de ID

O seletor de ID é identificado pelo símbolo de cerquilha (#). Ele é utilizado para elementos únicos no documento.

#topo-principal {
    background-color: #2c3e50;
    height: 60px;
}

Diferença entre ID e Classe

A distinção fundamental reside na frequência de uso:

• Classe (class): Funciona como um nome comum; pode ser atribuída a vários elementos na mesma página.
• ID: Funciona como um CPF; deve ser exclusivo. Cada ID só pode ser utilizado uma única vez por documento HTML.

Seletor Universal

Representado pelo asterisco (*), este seletor atinge todos os elementos presentes no DOM. É comumente utilizado para "resets" de CSS.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Pseudo-classes

As pseudo-classes são utilizadas para definir estados especiais de um seletor, como interações do usuário ou posição na estrutura do documento. Elas são marcadas pelo uso de dois pontos (:).

Pseudo-classes de Link

Controlam o comportamento visual de hiperlinks baseados no estado da navegação:

• :link: Estado padrão de um link não visitado.
• :visited: Link que já foi acessado pelo usuário.
• :hover: Ativado quando o cursor do mouse está sobre o elemento.
• :active: Ativado no momento exato do clique.

a {
    text-decoration: none;
    color: blue;
}

a:hover {
    color: darkblue;
    text-decoration: underline;
}

Pseudo-classes Estruturais

Permitem selecionar elementos com base em sua posição na árvore de elementos (DOM):

• :first-child: Seleciona o primeiro filho de um elemento pai.
• :last-child: Seleciona o último filho.
• :nth-child(n): Seleciona o n-ésimo filho, onde n pode ser um número ou uma fórmula (ex: 2n para pares).

/* Estiliza o segundo item de uma lista */
li:nth-child(2) {
    background-color: #f9f9f9;
}

/* Estiliza o primeiro parágrafo dentro de um container */
p:first-child {
    font-weight: bold;
}

Pseudo-classe de Alvo (:target)

A pseudo-classe :target é aplicada ao elemento que possui um ID correspondente ao fragmento da URL atual (âncora).

section:target {
    border: 2px solid orange;
    background-color: #fffbe6;
}