Não entendi para que serve a pseudo-classe :root { }. Poderia me explicar qual é o comportamento deste código?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Não entendi para que serve a pseudo-classe :root { }. Poderia me explicar qual é o comportamento deste código?
Olá Guilherme! Tudo bem?
A pseudo-classe :root é utilizada para selecionar o elemento raiz do documento HTML, ou seja, o elemento HTML. Ela é útil para definir variáveis CSS globais, que podem ser utilizadas em todo o documento.
Por exemplo, se você quiser definir uma cor padrão para o fundo de todo o seu site, você pode utilizar a pseudo-classe :root para definir uma variável CSS global:
:root {
--cor-fundo: #f2f2f2;
}E então, em qualquer parte do seu CSS, você pode utilizar essa variável:
body {
background-color: var(--cor-fundo);
}Dessa forma, se você precisar mudar a cor de fundo do seu site, basta alterar o valor da variável definida na pseudo-classe :root.
Espero ter ajudado e bons estudos!
Entendido!! Ficou bem claro! Muito obrigado!
Fico feliz em ajudar! Valeu o feedback :)