13

Estou aprendendo sobre pseudo classes estruturais, mas ainda não encontrei um artigo sobre essa pseudo classe, e tbm só encontro em inglês.

0

2 Respostas 2

12

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)

8

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.

Documentação.

Coloquei no GitHub para referência futura.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .