:root

Você está lendo a versão em inglês deste conteúdo porque ainda não há uma tradução para este idioma. Ajude-nos a traduzir este artigo!

Sumario

A pseudo-class CSS  :root representa o elemento root de uma árvore, representando o documento. Aplicado ao HTML, :root representa o elemento <html>  e é identico ao seletor html, exceto que sua especificidade é mais alta.

Sintaxe

:root

Exemplo

Usar :root pode ser util para declarar uma variavel CSS global:

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

Especificações

Especificação Status Comentário
Selectors Level 4
The definition of ':root' in that specification.		 Rascunho atual Sem mudança
Selectors Level 3
The definition of ':root' in that specification.		 Recomendação Definição inicial

Compatibilidade dos Navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1 1.0 (1.7 or earlier) 9 9.5 1.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?
Tópicos relacionados
  1. CSS
  2. CSS Reference
  3. CSS Selectors
  4. Guias
    1. Using the :target pseudo-class in selectors [Traduzir]
  5. Basic Selectors
    1. Type selectors [Traduzir]
    2. Class selectors [Traduzir]
    3. Seletores de ID
    4. Universal selectors [Traduzir]
    5. Seletor de atributos
  6. Combinators
    1. Adjacent sibling combinator [Traduzir]
    2. General sibling selectors
    3. Child selectors
    4. Descendant combinator [Traduzir]
    5. Column combinator [Traduzir]
  7. Pseudo-classes
    1. :active
    2. :any-link [Traduzir]
    3. :checked
    4. :blank [Traduzir]
    5. :default [Traduzir]
    6. :defined [Traduzir]
    7. :dir() [Traduzir]
    8. :disabled
    9. :empty
    10. :enabled
    11. :first [Traduzir]
    12. :first-child
    13. :first-of-type
    14. :fullscreen [Traduzir]
    15. :focus
    16. :focus-visible [Traduzir]
    17. :focus-within
    18. CSS :has() — Apply a selector to descendants of the element [Traduzir]
    19. :host() [Traduzir]
    20. :host-context() [Traduzir]
    21. :hover
    22. :indeterminate [Traduzir]
    23. :in-range [Traduzir]
    24. :invalid
    25. :is() (:matches(), :any()) [Traduzir]
    26. :lang() [Traduzir]
    27. :last-child
    28. :last-of-type
    29. :left [Traduzir]
    30. :link
    31. :not()
    32. :nth-child()
    33. :nth-last-child()
    34. :nth-last-of-type() [Traduzir]
    35. :nth-of-type()
    36. :only-child
    37. :only-of-type
    38. :optional
    39. :out-of-range [Traduzir]
    40. :placeholder-shown [Traduzir]
    41. :read-only [Traduzir]
    42. :read-write [Traduzir]
    43. :required
    44. :right [Traduzir]
    45. :root
    46. :scope [Traduzir]
    47. :target [Traduzir]
    48. :valid
    49. :visited
    50. :where() [Traduzir]
  8. Pseudo-elements
    1. ::-moz-progress-bar [Traduzir]
    2. ::-moz-range-progress [Traduzir]
    3. ::-moz-range-thumb [Traduzir]
    4. ::-moz-range-track [Traduzir]
    5. ::-ms-browse [Traduzir]
    6. ::-ms-check [Traduzir]
    7. ::-ms-clear [Traduzir]
    8. ::-ms-expand [Traduzir]
    9. ::-ms-fill [Traduzir]
    10. ::-ms-fill-lower [Traduzir]
    11. ::-ms-fill-upper [Traduzir]
    12. ::-ms-reveal [Traduzir]
    13. ::-ms-thumb [Traduzir]
    14. ::-ms-ticks-after [Traduzir]
    15. ::-ms-ticks-before [Traduzir]
    16. ::-ms-tooltip
    17. ::-ms-track [Traduzir]
    18. ::-ms-value [Traduzir]
    19. ::-webkit-progress-bar [Traduzir]
    20. ::-webkit-progress-value [Traduzir]
    21. ::-webkit-slider-runnable-track [Traduzir]
    22. ::-webkit-slider-thumb [Traduzir]
    23. ::after (:after)
    24. ::backdrop
    25. ::before (:before)
    26. ::cue [Traduzir]
    27. ::first-letter (:first-letter)
    28. ::first-line (:first-line) [Traduzir]
    29. ::grammar-error [Traduzir]
    30. CSS ::placeholder — Selector to match an edit box's placeholder text [Traduzir]
    31. ::selection [Traduzir]
    32. ::slotted() [Traduzir]
    33. ::spelling-error [Traduzir]