CSS * Selector
O seletor CSS * seleciona todos os elementos. Saiba como usá-lo, sua especificidade e veja exemplos práticos.
O seletor * (asterisco) é o seletor universal. Ele corresponde a todos os elementos do
documento, independentemente do tipo, id ou classe.
Normalmente você recorre ao * em duas situações: para aplicar um estilo base a tudo na
página (um "reset"), ou para selecionar todos os descendentes dentro de um contêiner específico
combinando * com outro seletor.
Este capítulo aborda a sintaxe, dois exemplos executáveis, como o * interage com a especificidade
e a ressalva de desempenho que você deve conhecer antes de usá-lo.
Sintaxe
* {
/* css declarations */
}Usado sozinho, * seleciona todos os elementos. Combinado com outro seletor e um espaço
(um combinador de descendentes), ele seleciona todos os elementos dentro
desse alvo:
/* every element inside any <div> */
div * {
/* css declarations */
}Especificidade
O seletor universal tem uma especificidade de zero — (0, 0, 0). Ele não adiciona nenhum
peso a uma regra. Isso significa que quase qualquer outro seletor (um nome de tag, uma classe, um id) irá
sobrescrever uma declaração vinda de *, o que é exatamente por isso que ele funciona bem para definir
padrões que regras mais específicas podem refindar.
Exemplo: selecionar todos os elementos
A regra abaixo pinta o fundo de todos os elementos da página, incluindo <html>,
<body>, títulos e parágrafos:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
* {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>* selector example</h2>
<div class="example">
<p id="example1">Lorem ipsum is simply dummy text...</p>
<p id="example2">Lorem ipsum is simply dummy text...</p>
</div>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Exemplo: selecionar todos os elementos dentro de um <div>
Aqui div * tem como alvo apenas os elementos aninhados dentro de um <div>.
O <p> isolado após o <div> mantém seu fundo padrão, enquanto o <p> e o
<span> dentro do <div> são estilizados:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div * {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>* selector example</h2>
<div class="example">
<p id="example1">Lorem ipsum is simply dummy text...</p>
<span id="example2">Lorem ipsum is simply dummy text...</span>
</div>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Um uso comum: um reset de box-sizing
O uso mais popular do * no mundo real é normalizar o modelo de caixa para que padding e
bordas não expandam mais a largura de um elemento. Este trecho está em inúmeras folhas de estilo:
*,
*::before,
*::after {
box-sizing: border-box;
}Veja box-sizing para entender o que border-box muda.
Desempenho e boas práticas
- Use com moderação em seletores aninhados. Uma regra como
*sozinho é barata, mas combiná-la dentro de longas cadeias de descendentes (por exemplo.nav ul li *) força o navegador a avaliar mais elementos. Para uma única regra de reset isso é insignificante; evite em seletores profundamente aninhados e frequentemente correspondidos. - Prefira-o para resets, não para temas. Como sua especificidade é
0, o*é ideal para padrões básicos, mas uma escolha ruim quando você precisa que uma regra vença outros estilos. - Ele corresponde a pseudo-elementos apenas quando você pede.
*corresponde a elementos;*::beforee*::aftersão necessários para também cobrir conteúdo gerado, como no reset acima.
Seletores relacionados
- Visão geral dos seletores CSS — a lista completa de tipos de seletores.
- Seletores de id e classe — selecione elementos específicos.
:first-child— uma pseudo-classe estrutural.