O seletor universal é utilizado para selecionar todos os elementos existentes em uma página HTML.
Ele é representado pelo símbolo de asterisco (*).
* {
propriedade: valor;
}
O símbolo * representa todos os elementos HTML.
* {
font-family: Arial;
color:#333;
}
Todos os elementos da página receberão essa configuração.
| Uso | Objetivo |
|---|---|
| Fonte padrão | Definir uma tipografia geral. |
| Reset CSS | Remover estilos padrões. |
| Box Model | Controlar tamanhos. |
| Padronização | Organizar elementos. |
Navegadores possuem estilos padrões diferentes.
O seletor universal é muito utilizado para criar um padrão inicial.
* {
margin:0;
padding:0;
box-sizing:border-box;
}
Esse código remove margens e ajusta o cálculo dos elementos.
Uma prática profissional muito utilizada:
* {
box-sizing:border-box;
}
O navegador considera padding e bordas dentro da largura definida.
| Sem Reset | Com Reset |
|---|---|
| Cada navegador possui padrões. | Todos iniciam iguais. |
| Maior chance de diferenças. | Layout mais previsível. |
O seletor universal pode ser combinado com outros seletores.
.container * {
margin:10px;
}
Aplica margem em todos os elementos dentro do container.
HTML
<div class="card">
<h2>Título</h2>
<p>Texto</p>
</div>
CSS
.card * {
font-family:Arial;
}
O seletor universal possui baixa prioridade.
| Seletor | Prioridade |
|---|---|
| * | Muito baixa. |
| Elemento | Baixa. |
| Classe | Média. |
| ID | Alta. |
Apesar de útil, o seletor universal deve ser utilizado com atenção.
| Cuidado | Motivo |
|---|---|
| Aplicar muitos estilos | Pode afetar componentes. |
| Usar em grandes projetos sem controle | Dificulta manutenção. |
| Erro | Problema |
|---|---|
| Usar para tudo | Perde controle dos estilos. |
| Alterar propriedades complexas | Afeta elementos inesperados. |
| Não entender prioridade | Conflitos CSS. |
| Conceito | Descrição |
|---|---|
| * | Seleciona todos os elementos. |
| Reset CSS | Remove padrões do navegador. |
| Box-sizing | Controla dimensionamento. |