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.

  1. Por un tema de especificidad o peso.
  2. Para seguir el común y uso de definir variables o propiedades personalizadas allí.
  3. No siempre definimos estilos para un documento HTML, de esta manera accedemos y afectamos al elemento raíz.
Compartir en: Facebook Twitter