O :root
CSS pseudo-class representa o elemento root da arvore do
documento. Aplicado ao HTML, :root representa o elemento <html>
e é
idêntico ao seletor html, exceto que sua especificidade é mais alta.
No caso do Bootstrap no :root
eles declaram algumas variáveis globais para o documento, como a Tipografia a paleta de cores e os breakpoint
Sobre os "--" veja o que diz a documentação oficial W3C:
A custom property is any property whose name starts with two dashes
(U+002D HYPHEN-MINUS), like --foo.
Ou seja é a propriedade que começa com dois traços --
Link da documentação W3C sobre custom property https://www.w3.org/TR/css-variables-1/#defining-variables
Essas cores como --blue:#007bff;
são na verdade CSS-Variables, então como ele declara no :root que a cor --blue
tem como valor #007bff
, depois ele pode colocar em um texto color:var(--blue)
e ele na verdade vai pegar o valor #007bff
O legal das variáveis é que vc pode usa-la em qualquer elementos e depois facilmente trocar o tema do site inteiro só mudando o valor que está na variável, é tipo um CSS dentro do CSS, trocando o valor da variável global que está no :root
vc troca o site inteiro, podendo ser uma cor, font-family, etc...
Veja o exemplo abaixo para ver como funciona. Nele eu declarei que --azul
é blue
, mas se eu trocar blue
por red
todos os elementos com a variável --azul
ficam red
.
OBS: no exemplo abaixo o valor #0f0
é um fallback caso o browser não de suporte a variável --azul
, assim ele vai usar a cor que vem após a vírgula (verde).
Repare que eu usei a variável var(--azul)
tanto para determinar o color
da font assim como a cor do background-color
.
:root {
--azul: blue;
}
p {
color: var(--azul);
}
div {
width: 100px;
height: 100px;
background-color: var(--azul, #0f0);
}
/* repare que a variável --azullll não existe e o fallback é #0f0 então ela fica verde*/
div:nth-of-type(2) {
background-color: var(--azullll, #0f0);
}
<p>Lorem Ipsum</p>
<div></div>
<div></div>
DICA:
Outra opção de uso. Agora em vez de declarar o valor da propriedade de forma variável eu vou declarar a propriedade como um variável, e quando eu usa-la no estilo do elemento eu apenas mudo com o valor que eu quero.
Primeiro setei um variável no seletor universal * {}
e depois chamei o valor --mb: Npx
dela direto no elemento. Dessa forma em qualquer elemento que vc colocar --mb + valor
vc vai estar dando um margin-bottom
do tamanho do valor
* {
margin-bottom: var(--mb, initial);
}
.item1 {
--mb: 20px;
background: red;
}
.item2, .item3 {
--mb: 40px;
background: blue;
}
.item3 {
background: green;
}
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="">item4</div>
OBS: O initial
nesse caso é o fallback , então caso vc não sete a variável em algum elemento o valor initial
fica valendo evitando efeitos colaterais indesejados.
Vc pode ler mais na documentação oficial da Mozilla: https://developer.mozilla.org/pt-BR/docs/Web/CSS/var
Consulte aqui o suporte dos browsers a css-variables
, vejam que é amplamente aceite, e para o IE que não aceita fica valendo o fallback valor após a virgula https://caniuse.com/#feat=css-variables
Tudo que vc colocar de estilo no :root
fica valendo para o documento todo, mas em alguns casos vc pode usar outras seletores como por exemplo o seletor universal *
. Se vc colocar ali font-size:20px
por exemplo, esse valor será o default para todo o texto que vc escrever no documento.
https://developer.mozilla.org/pt-BR/docs/Web/CSS/:root
Root completo do Bootstrap 4
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
...
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
Veja que além das cores eles tb declaram a Tipografia etc. Se vc quiser usar o Google Fonte basta trocar a --font-family
ali e pronto, seu site todo terá uma nova font global.