Qual seria a diferença entre esse :root e o * , já que pelo que entendi ambos são globais.
Solucionado
Qual seria a diferença entre esse :root e o * , já que pelo que entendi ambos são globais.
Oi, Samuel, tudo bem?
O seletor :root{} é uma pseudoclasse muito utilizada para definir variáveis CSS globais, que podem ser usadas em todo o documento. Esse seletor é responsável por seleciona o elemento raiz do documento, ou seja, o elemento HTML <html>.
Por exemplo, se você quiser definir um padrão de cor que pode será usada várias vezes dentro de todo o documento, você pode usar o seletor :root{} para definir a variável CSS correspondente, como no exemplo abaixo:
:root {
--cor-destaque: #ff0000;
}E então, você pode usar essa variável em qualquer lugar do documento, como no exemplo abaixo:
h1 {
color: var(--cor-destaque);
}Uma grande vantagem é que caso queira trocar essa cor, não precisará trocá-la em todos os lugares do arquivo CSS, apenas dentro do seletor :root{} e automaticamente ela será alterada em todas as partes que contém essa variável.
Por outro lado, o seletor *{} é um seletor universal que seleciona todos os elementos no documento. Ele afeta todos os elementos presentes na página, desde a raiz até o último elemento aninhado. Seu uso é sempre associado à aplicação de estilos a todos os elementos HTML, o que pode ser útil em algumas situações como, por exemplo, resetar alguns estilos pré-definidos pelo navegador.
No caso de você querer resetar a margine o padding de todo o documento, usamos o seletor *{}. Como mostrado abaixo:
*{
margin:0;
padding:0;
}Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!