Qual é utilidade da pseudo classe :root? – html css css3

Pergunta:


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

Autor da pergunta Gilmar Santos

Resposta Guilherme Nascimento:

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 referencial 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.

Fonte

Related Posts:

Qual a diferença entre AppCompatActivity e Activity? – android android-activity
Pergunta: Qual a diferença da AppCompatActivity para Activity ? A partir de qual versão a AppCompatActivity foi adicionada ao Android? Autor da pergunta Luhhh A diferença reside ...
Como abreviar palavras em PHP? – php string
Pergunta: Possuo informações comuns como nome de pessoas e endereços, e preciso que elas contenham no máximo 30 caracteres sem cortar palavras. Exemplo: 'Avenida Natalino João Brescansin' ...
Qual é a finalidade de um parêntese vazio numa declaração Lambda? – c# expressões-lambda característica-linguagem
Pergunta: Criei um exemplo de uma declaração Lambda sem argumentos, entretanto, estou com duvidas referente a omissão do parêntese vazio () na declaração. Veja o exemplo: class ...
Boas práticas para URI em API RESTful – api rest restful
Pergunta: Estou com dúvida em relação às URIs de alguns recursos da api que estou desenvolvendo. Tenho os recursos projetos e atividades com relação 1-N, ...
Dúvidas sobre a integração do MySQL com Java – java mysql netbeans
Pergunta: Estou criando um sistema no NetBeans, utilizando a linguagem Java e o banco de dados MySQL. Escrevi o seguinte código para realizar a conexão ...
Qual é a finalidade da pasta Model do framework Inphinit? – php inphinit
Pergunta: No Inphinit micro-framework existe a pasta Model que fica dentro da pasta application, e nela é onde ficam as classes, mas eu estou muito ...
Uso do ‘@’ em variáveis – javascript typescript coffeescript
Pergunta: Vejo em algumas linguagens que compilam para javascript, como TypeScript e CoffeeScript, o uso do @ em variáveis, como também, casos em que o ...
Qual tamanho máximo um arquivo JSON pode ter? – json arquivo
Pergunta: Vou dar um exemplo para conseguir explicar minha duvida: Preciso recuperar informação de imagens vindas de uma API, esse banco de imagens me retorna JSON's ...
O que é Teste de Regressão? – terminologia engenharia-de-software testes
Pergunta: Na matéria de Teste de Software o professor abordou um termo chamado Teste de Regressão, isto dentro da disciplina de teste de software. Sendo ...
O que é um construtor da linguagem? – php característica-linguagem
Pergunta: Em PHP, já li e ouvi várias vezes a respeito dos Construtores da Linguagem. Os casos que sempre ouvi falar deles foi em casos ...
Função intrínseca para converter numérico para string – cobol
Pergunta: Estou a tentar saber se existe alguma função intrínseca do COBOL para converter um data numérico para string sem precisar usar a cláusula REDEFINES: ( ...
Porque usar implements? – java android
Pergunta: Qual a diferença entre usar btn.setOnClickListener(new OnClickListener() { e public class MainActivity extends Activity implements OnClickListener{ Estive fazendo um curso de Android e meu professor falou que ...
O que é XHTML e quando deve ser usado? – html xml xhtml
Pergunta: O que eu sei é que o XHTML precisa ser XML válido. Isso implica, por exemplo, que todas as tags precisam ser fechadas. Por ...
Uma placa aceleradora de vídeo pode melhorar o desempenho não-gráfico? [fechada] – desempenho
Pergunta: Para desenvolver em Ruby on Rails, eu utilizo aqui uma máquina virtual do VirtualBox com Ubuntu Server 14.04 sem interface gráfica instalada. Recentemente descobri uma ...
Concat() VS Union() – c# .net
Pergunta: Qual a diferença entre Concat() e Union() ? Quando usar Concat() e quando usar Union() ? Somente pode ser usado em list ? ...

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *