Os dois têm a mesma função? Ambos definem de modo generalista determinados procedimentos. Quando eu devo usar um ou outro?
-
1CSS não é meu forte mas acho que :root { ... } é mais equivalente a html { ... }, ou seja, ao elemento de topo, que é um único elemento, apesar de conter todos os outros. * { ... } define atributos para todos os tipos de elementos (p, h1, h2, h3, div, span, etc.)– epx14/03/2020 às 17:09
1 Resposta
Não, eles não têm a mesma função.
Da wiki W3C:
A pseudo-classe
:root
representa um elemento que está na raiz do document. No HTML, será sempre o elemento HTML.
De forma análoga, se você estiver em um documento SVG, o :root
será o elemento SVG. Em suma, você pode utilizar o :root
para selecionar o elemento de mais alto nível de qualquer documento.
O seletor *
, também chamado de seletor universal, irá selecionar qualquer elemento do documento.
Veja a diferença:
:root {
border: solid 1px blue;
background-color: rgba(0, 0, 255, 0.3);
}
* {
border: solid 1px #FF9800;
background-color: rgba(255, 152, 0, 0.1);
}
<p>
<span>Olá</span>, <strong>mundo</strong><em>!</em>
</p>
Note que o :root
selecionou apenas o elemento de maior nível do documento. Se você abrir as ferramentas do desenvolvedor, verá que é o elemento html
. O seletor universal, por outro lado, selecionou todos os elementos da página.