Seletor Universal (*): Aplicando a todos os elementos

Você já explorou diversos seletores que permitem mirar em elementos específicos ou grupos de elementos. Mas e se você quiser aplicar uma regra CSS a todos os elementos da sua página, sem exceção?

É para isso que serve o Seletor Universal, representado por um asterisco (*). Ele é como um "coringa" que seleciona absolutamente todos os elementos HTML no documento.

Pense no seletor universal como uma "regra geral" que se aplica a tudo, antes que regras mais específicas entrem em ação.

Como funciona o Seletor Universal

A sintaxe é a mais simples de todas: apenas o asterisco.

Sintaxe:

* {
  propriedade: valor;
}

Exemplo:

Se você quiser que todos os elementos da sua página tenham uma cor de texto padrão e uma fonte específica, você pode usar o seletor universal:

* {
  color: #333; /* Cor de texto padrão para tudo */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Fonte padrão para tudo */
  box-sizing: border-box; /* Uma propriedade muito comum para resetar o box model */
}

Resultado: Todos os elementos HTML visíveis na sua página (parágrafos, títulos, links, divs, spans, etc.) herdarão a cor de texto #333 e a fonte especificada. A propriedade box-sizing: border-box; será aplicada a todos os elementos, o que é uma prática recomendada em CSS moderno.

Quando usar o Seletor Universal?

O seletor universal é mais frequentemente usado para:

Resetar ou Normalizar Estilos: Definir estilos base que se aplicam a todos os elementos para garantir uma consistência entre navegadores ou para "zerar" estilos padrão indesejados.
- Exemplo: O famoso "CSS Reset" ou "Normalize.css" frequentemente usa o seletor universal para aplicar box-sizing: border-box; a todos os elementos, o que simplifica muito o cálculo de larguras e alturas.
```
/* Reset básico para box-sizing */
* {
  margin: 0; /* Remove margens padrão de todos os elementos */
  padding: 0; /* Remove paddings padrão de todos os elementos */
  box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura/altura */
}
```

Definir Propriedades Herdáveis Globais: Aplicar propriedades que são herdadas pelos elementos filhos, como font-family, color, line-height.

html { /* Ou você pode aplicar no html ou body para propriedades herdáveis */
  font-size: 16px;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: #444;
}

/* Ou, de forma mais abrangente, mas com maior especificidade para não herdáveis */
* {
  font-family: 'Open Sans', sans-serif; /* Se não quiser que o body seja o único a definir */
  color: #444;
}

Testes Rápidos: Para depurar ou testar rapidamente um estilo em todos os elementos.

/* Para depuração: mostra borda em todos os elementos */
* {
  border: 1px solid red !important;
}

Vantagens:

Abrangência: Aplica estilos a todos os elementos de forma rápida e fácil.
Consistência: Útil para estabelecer uma base de estilos consistente em todo o documento.

Desvantagens:

Baixa Especificidade: O seletor universal tem a menor especificidade de todos os seletores. Isso significa que qualquer outra regra (seletor de tipo, classe, ID, etc.) irá sobrescrevê-lo se houver um conflito.
Performance (Potencial): Em documentos HTML muito grandes e complexos, usar o seletor universal para aplicar muitas propriedades pode ter um impacto mínimo na performance, pois o navegador precisa verificar e aplicar essas regras a cada elemento. No entanto, para a maioria dos sites modernos, esse impacto é geralmente insignificante.
Sobrescrita Frequente: Como ele se aplica a tudo, muitas de suas propriedades serão sobrescritas por seletores mais específicos, o que pode levar a um CSS mais verboso se não for usado com moderação.

O seletor universal é uma ferramenta poderosa para estabelecer estilos base e garantir consistência, mas deve ser usado com consciência de sua baixa especificidade e potencial impacto (mínimo) na performance. É mais eficaz quando usado para propriedades que realmente precisam ser aplicadas a todos os elementos ou para fins de reset/normalização.