O :rootseletor permite que você direcione o elemento “pai” de nível mais alto no DOM, ou árvore de documentos. É definido nas especificações dos seletores CSS de nível 3 como uma “pseudoclasse estrutural”, o que significa que é usado para estilizar o conteúdo com base em seu relacionamento com o conteúdo pai e irmão.
Na esmagadora maioria dos casos que você provavelmente encontrará, :rootrefere-se ao elemento em uma página da web. Em um documento HTML, o htmlelemento sempre será o pai de nível mais alto, portanto, o comportamento de :rooté previsível. No entanto, como CSS é uma linguagem de estilo que pode ser usada com outros formatos de documento, como SVG e XML, a :rootpseudo-classe pode se referir a diferentes elementos nesses casos. Independentemente da linguagem de marcação, :rootsempre selecionará o elemento mais alto do documento na árvore do documento.
No exemplo abaixo, o :rootseletor de pseudoclasse é usado para criar uma cor de fundo atrás do elemento. Nesse caso, o mesmo efeito poderia ser obtido usando o htmlseletor de elemento em nosso CSS.
Pontos de interesse
- Embora o
:rootseletor e ohtmlseletor tenham como alvo os mesmos elementos HTML, pode ser útil saber que,:rootna verdade, tem uma especificidade mais alta. Seletores de pseudoclasse (mas não pseudoelementos) têm uma especificidade igual à de uma classe, que é maior do que um seletor de elemento básico.
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Sim | Sim | Sim | 9,5+ | IE9 + | Sim | Sim |