Solucionado
O que esses [] significam? E por que foi usado?
[data-contexto="foco"] {
--main-bg-color: linear-gradient(180deg, #8B1FF8 0%, #041832 48.44%, #01080E 100%);
}
[data-contexto="descanso-curto"] {
--main-bg-color: linear-gradient(180deg, #0F725C 0%, #041832 48.44%, #01080E 100%);
}
[data-contexto="descanso-longo"] {
--main-bg-color: linear-gradient(180deg, #1875E9 0%, #041832 48.44%, #01080E 100%);
}
| Seletor | Exemplo | Descrição |
|---|---|---|
| [atributo] | [data-contexto] | Seleciona todos os elementos com um atributo de "data-contexto" |
| [attribute=value] | [data-contexto="foco"] | Seleciona todos os elementos com data-contexto="foco" |
Oi, Rebeca, tudo bem?
Como o colega Luis mencionou acima, os colchetes ([]) são seletores de atributos no CSS. No código que você compartilhou, eles são usados para selecionar elementos HTML que possuem um data attribute, neste caso chamado de data-contexto. Por exemplo, [data-contexto="foco"] seleciona todos os elementos com um atributo data-contexto com o valor "foco". Em seguida, o código CSS dentro das chaves {} é aplicado a esses elementos.
Caso queira mais informações sobre como usar CSS em data attributes, recomendo a leitura da documentação abaixo:
Espero ter ajudado. Caso tenha dúvidas, não hesite em postar no fórum!
Abraços e bons estudos!