Documentação CSS: Seletores Personalizados e Combinações

ID vs. Classe

• ID (#):
  • Usado para identificar um único elemento na página HTML.
  • No CSS, um ID é referenciado usando o símbolo cerquilha (#) antes do nome do ID.
  • Exemplo CSS: #titulo-principal { color: blue; } - Aplica a cor azul ao elemento com id="titulo-principal".
  • Regra: Um ID deve ser único em toda a página HTML; não podem existir dois elementos com o mesmo ID.
• Classe (.):
  • Usada para agrupar múltiplos elementos que compartilham características ou estilos semelhantes.
  • No CSS, uma classe é referenciada usando um ponto (.) antes do nome da classe.
  • Exemplo CSS: .topico { text-align: right; } - Aplica alinhamento à direita a todos os elementos com class="topico".
  • Um mesmo elemento pode ter várias classes, e várias classes podem ser aplicadas a diferentes elementos.

Nomeando IDs e Classes (Boas Práticas)

• Semântica: Use nomes que descrevam o propósito ou a função do elemento, não sua aparência (ex: .menu-navegacao em vez de .caixa-azul).
• Consistência: Escolha um padrão (como BEM - Block Element Modifier, ou OOCSS - Object-Oriented CSS) e mantenha-o em todo o projeto.
• Formato:
  • Use letras minúsculas.
  • Separe palavras com hífen (-), conhecido como kebab-case (ex: main-content, profile-picture). Evite underscores (_) ou CamelCase, ou use-os consistentemente se for a convenção do projeto.
  • Evite nomes muito curtos ou genéricos como x ou box.

Pseudo-classes (:)

• Adicionam estilos a elementos baseados em um estado especial ou posição, sem precisar de classes ou IDs adicionais.
• São indicadas por um único sinal de dois pontos (:) após o seletor.
• Exemplos Comuns:
  • :link: Estiliza links não visitados.
  • :visited: Estiliza links que o usuário já visitou. Exemplo CSS: a:visited { color: darkred; }.
  • :hover: Aplica estilo quando o ponteiro do mouse está sobre o elemento. Exemplo CSS: a:hover { text-decoration: underline; }.
  • :active: Aplica estilo enquanto o elemento está sendo ativado (ex: clicado).
  • :focus: Aplica estilo quando o elemento recebe foco (ex: campo de formulário selecionado).
  • :checked: Aplica estilo a elementos de formulário como checkboxes ou radio buttons que estão marcados.
  • :disabled: Seleciona elementos de formulário que estão desabilitados.
  • :enabled: Seleciona elementos de formulário que estão habilitados.
  • :first-child: Seleciona o primeiro elemento filho de seu pai.
  • :last-child: Seleciona o último elemento filho de seu pai.
  • :nth-child(n): Seleciona elementos baseados em sua posição (ex: :nth-child(2) seleciona o segundo filho, :nth-child(odd) seleciona filhos ímpares).
  • :empty: Seleciona elementos que não têm filhos (incluindo nós de texto).
  • :not(selector): Seleciona elementos que não correspondem ao seletor interno.

Pseudo-elementos (::)

• Permitem estilizar partes específicas de um elemento, como a primeira letra ou linha, ou inserir conteúdo antes ou depois do conteúdo real do elemento.
• São indicados por dois sinais de dois pontos (::) após o seletor (embora a sintaxe antiga com um : ainda funcione para compatibilidade com navegadores mais antigos em alguns casos como ::before e ::after).
• Exemplos Comuns:
  • ::before: Insere conteúdo antes do conteúdo do elemento selecionado. Exemplo CSS: .especial::before { content: '▶ '; }. A propriedade content é obrigatória.
  • ::after: Insere conteúdo depois do conteúdo do elemento selecionado. Exemplo CSS: .especial::after { content: ' ◀'; }. A propriedade content é obrigatória.
  • ::first-letter: Estiliza a primeira letra do texto dentro de um elemento de bloco.
  • ::first-line: Estiliza a primeira linha do texto dentro de um elemento de bloco.
  • ::marker: Estiliza o marcador de itens de lista (ex: <li>).
  • ::selection: Aplica estilos ao texto que foi selecionado (destacado) pelo usuário.
  • ::placeholder: Estiliza o texto de placeholder em campos de formulário (<input>, <textarea>).

Definindo Seletores e Seus Significados

• Seletor de Descendente (espaço):
  • Representado por um espaço entre dois seletores.
  • Seleciona elementos que são descendentes (filhos, netos, etc.) de um elemento específico.
  • Exemplo: article p seleciona todos os elementos <p> que estão dentro de um elemento <article>, não importa o quão aninhados estejam.
• Seletor de Filho Direto (>):
  • Seleciona elementos que são filhos diretos (primeiro nível de descendência) de um elemento específico.
  • Exemplo: div > p seleciona apenas os elementos <p> que são filhos diretos de um <div>. Um <p> dentro de outro elemento que por sua vez está dentro do <div> não seria selecionado por esta regra.
• Agrupamento de Seletores (,):
  • Permite aplicar o mesmo conjunto de regras CSS a múltiplos seletores diferentes, separando-os por vírgula.
  • Pense na vírgula como um "OU".
  • Exemplo: h1, h2, .destaque { color: navy; } aplica a cor navy a todos os elementos <h1>, todos os elementos <h2> e a todos os elementos com a classe destaque.

Pseudo-classes: Dando Vida à Interatividade no CSS

Embora "IO" (Input/Output) não seja um termo técnico padrão em CSS, ele captura a ideia fundamental de como os elementos da sua página reagem à interação do usuário. Essa capacidade de resposta é majoritariamente implementada através das pseudo-classes.

As pseudo-classes permitem aplicar estilos específicos a um elemento não com base em atributos fixos como id ou class, mas sim com base em seu estado atual ou em como o usuário está interagindo com ele. Elas são essenciais para criar interfaces dinâmicas e intuitivas.

Vamos detalhar as pseudo-classes mais importantes para interatividade:

1. :hover - A Resposta ao Cursor:

   • O que faz: Aplica estilos quando o ponteiro do mouse (cursor) está posicionado sobre o elemento[cite: 79]. É talvez a pseudo-classe interativa mais comum.
   • Exemplo Prático (do PDF): Mudar a aparência de um link quando o mouse passa sobre ele, como adicionar um sublinhado [cite: 76] ou alterar cores e fundo[cite: 81].
   • Outro Exemplo (do PDF): Fazer um conteúdo oculto (como um parágrafo dentro de uma div) aparecer quando o mouse passa sobre a div[cite: 88, 89, 95].
   • Uso: Ideal para indicar visualmente que um elemento é clicável ou interativo, fornecer feedback imediato ou revelar informações contextuais.

2. :active - O Momento da Ativação:

   • O que faz: Aplica estilos durante o momento em que o elemento está sendo ativado pelo usuário – tipicamente, enquanto o botão do mouse está pressionado sobre ele ou enquanto está sendo "tocado" em uma tela sensível ao toque.
   • Exemplo Prático: Mudar a cor de fundo ou a aparência de um botão exatamente no instante em que ele é clicado, dando um feedback visual de "pressionado".

     button:active {
       background-color: darkblue;
       transform: translateY(2px); /* Simula o botão sendo pressionado */
     }
     

   • Uso: Fornece feedback visual instantâneo de que a ação do usuário (clique/toque) foi registrada.

3. :focus - Indicando Onde a Atenção Está:

   • O que faz: Aplica estilos a um elemento que recebeu foco. Elementos como links, botões e campos de formulário (<input>, <textarea>, <select>) podem receber foco, seja através de um clique do mouse, toque ou navegação pelo teclado (como usar a tecla Tab).
   • Exemplo Prático: Destacar um campo de formulário com uma borda colorida quando o usuário clica nele ou navega até ele com o teclado, indicando onde a digitação ocorrerá.

     input:focus {
       border-color: dodgerblue;
       box-shadow: 0 0 5px dodgerblue;
       outline: none; /* Remove o contorno padrão para usar o box-shadow */
     }
     

   • Uso: Crucial para acessibilidade (indicando o elemento ativo para usuários de teclado) e usabilidade (mostrando claramente qual campo de formulário está pronto para receber entrada).

4. Pseudo-classes de Estado de Formulário (:checked, :disabled, :enabled, :valid, :invalid, etc.):

   • O que fazem: Refletem o estado específico de elementos de formulário.
     • :checked: Aplica estilo a checkboxes ou radio buttons marcados.
     • :disabled / :enabled: Estiliza campos que estão desabilitados ou habilitados para interação.
     • :valid / :invalid: Estiliza campos de input com base na validação de dados (ex: um campo de email com formato válido ou inválido).
   • Exemplo Prático: Mudar a aparência de um rótulo (<label>) associado a um checkbox quando ele está marcado, ou tornar um botão desabilitado visualmente distinto (ex: cinza e sem resposta ao :hover).

     input[type="checkbox"]:checked + label {
       font-weight: bold;
       color: green;
     }
     
     button:disabled {
       opacity: 0.5;
       cursor: not-allowed;
     }
     

   • Uso: Fornecem feedback visual claro sobre o estado dos controles de formulário, guiando o usuário no preenchimento e indicando quais ações são possíveis.

Em resumo, as pseudo-classes são a ferramenta fundamental no CSS para responder dinamicamente às ações e estados do usuário, tornando as páginas web interativas e mais fáceis de usar. Elas permitem que seus estilos se adaptem ao contexto da interação, sem a necessidade de JavaScript para muitas tarefas comuns de feedback visual.