Estou aprendendo sobre pseudo classes estruturais, mas ainda não encontrei um artigo sobre essa pseudo classe, e tbm só encontro em inglês.
2 Respostas
O :root
em documentos html sempre vai se referir ao elemento <html>
, pois mesmo que você crie um elemento "customizado" no lugar de <html>
o motor do browser sempre vai gerar o HTML novamente.
Ele pode ser usado quando você vai compartilhar um CSS em mais de um tipo de documento, como um HTML e um XML que pode ser customizado, um exemplo é o SVG:
global.css
:root { /*estilo que vai servir para vários documentos*/ }
SVG:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <link href="global.css" type="text/css" /> <rect x="10" y="10" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"/> </svg>
html:
<!DOCTYPE html> <html> <head> <title></title> <link href="global.css" type="text/css"> </head> <body> </body> </html>
Outro local que o :root
pode ser interessante pra estruturas XML quando vai se aplicar XSLT, os XSLT são arquivos de estilo e estrutura para XSL (não confundir com XLS que é um formato de documento do office) que este por sua vez é uma estrutura HTML embutida em um XML, basicamente os XSLs são XMLs que conseguem transformar o seu XML em algo visual equivalente ao HTML, tendo condições como IF e FOR.
Como um desenvolvedor XML pode ter diferentes documentos com diferentes elementos superiores e ainda sim usarem um mesmo CSS o :root
pode ajudar a englobar todos (se bem que tenho quase certeza que todos XSL é convertido para HTML pelo motor do navegador)
O CSS não precisa ser aplicado necessariamente ao HTML, certo? Ele é uma forma de estilizar documentos. Como se referencia ao elemento que dá origem a todos os outros? Ou seja, o que é em termo genéricos o elemento que contém todos ou outros? Esse é elemento é conhecido como :root
.
Se estiver usando uma página HTML é é o equivalente ao <HTML>
.
Se for um SVG, então ele é o <SVG>
.
Embora possa ser usado em vários tipos de documentos, só faz sentido naqueles que cabem estilização.