Pseudo-clases en CSS
Cuando desarrollamos una página web estamos prácticamente definiendo un árbol, digamos que todo comienza en html, de esta nacen head, body y así. Este enfoque es correcto precisamente para diferenciar a una pseudo-clase de un pseudo-elemento.
Veamos un ejemplo donde se vea claramente al árbol o la estructura jerárquica.
html (root)
├── head
│ └── title
└── body
├── p
│ └── span
└── footer
Es posible acceder y alterar a cada elemento de este árbol mediante CSS, sin embargo, las pseudoclases son aquellas que tienen como fin directo ayudarnos a crear estilos para elementos que no son parte del árbol y que no se pueden identificar con los selectores conocidos.
Raíz del documento
Si queremos aplicar un estilo al elemento raíz del documento podemos usar a la pseudoclase :root. Al usarla afectamos directamente a la etiqueta <html>.
:root {
background-color: blue;
}
Aunque es muy común utilizar este sistema para declarar variables globales en el documento de estilos. A las variables también se le conocen como propiedades personalizadas, se crean comenzando con dos guiones "--" y se acceden a ellas o se aplican usando a la función var(). Es valor debe ser uno conocido y válido por CSS.
Veamos cómo podemos crear variables en CSS.
:root {
--light-color: #00ACED;
--dark-color: #005D80;
}
Uso de dichas variables:
.button {
background-color: var(--dark-color);
color: var(--light-color);
}
Aplicación de la clase .button CSS en un elemento HTML.
<a href="#" class="button">
Clic
</a>
Todo es una cascada, nota como defino elementos globales, luego los uso en un bloque CSS para finalmente aplicarlo a un elemento HTML.
En este caso te puedes preguntar ¿por qué usar a :root si existe la opción de html? Y tenemos varias respuestas para ello.
- Por un tema de especificidad o peso.
- Para seguir el común y uso de definir variables o propiedades personalizadas allí.
- No siempre definimos estilos para un documento HTML, de esta manera accedemos y afectamos al elemento raíz.