Clase 06 · Especificidad y herencia
Estos apuntes siguen la sexta clase de Edición Web I: cómo decide CSS qué estilo se aplica cuando varias reglas afectan al mismo elemento (especificidad y !important) y cómo algunas propiedades pasan de los elementos padre a sus hijos (herencia). El código de cada ejemplo es el mismo que se mostró en clase.
Especificidad CSS
La especificidad en CSS es un grupo de reglas aplicadas a los selectores CSS para determinar qué estilo se aplica a un elemento. Cuanto más específico sea un selector, mayor será su valor en puntos y más probable será que esté presente en el estilo del elemento.
| Selector | Puntos (!important, ID, en línea, clase, elemento) |
|---|---|
!important | 1, 0, 0, 0, 0 |
#ID | 0, 1, 0, 0, 0 |
| Estilos en línea | 0, 0, 1, 0, 0 |
.clases (pseudoclases o atributos) | 0, 0, 0, 1, 0 |
<elementos/> (o pseudo elementos) | 0, 0, 0, 0, 1 |
* Selector universal | 0, 0, 0, 0, 0 |
Se comparan las columnas de izquierda a derecha: un solo !important vale más que cualquier cantidad de IDs; un solo ID vale más que cualquier cantidad de clases, y así sucesivamente.
Ejemplo de especificidad
Los dos <h1> coinciden con el selector h1 (1 punto de elemento), pero el segundo además tiene la clase azul (1 punto de clase), que pesa más que un elemento:
<!DOCTYPE html>
<html>
<head>
<title>Título de la web</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<h1>Este aparecerá de color rojo</h1>
<h1 class="azul">Este azul</h1>
</body>
</html>h1 {
color: red;
}
.azul {
color: blue;
}Este aparecerá de color rojo
Este azul
.azul = 0, 0, 0, 1, 0 gana a h1 = 0, 0, 0, 0, 1. Por eso el segundo título es azul, aunque la regla de h1 también le afecta.
Declaración !important;
En CSS podemos declarar reglas de estilos como !important para que tomen precedencia sobre otras reglas de estilos que se puedan encontrar en una página web. La declaración !important se pone entre el valor y el ; final.
div {
font-size: 13 !important;
}
.caja{
color: blue !important;
}Un elemento <div class="caja" style="color:red"> tiene un estilo en línea más específico que la clase, pero .caja lleva !important y gana:
color: blue !important;Úsalo con moderación: cuando todo es !important, el código es difícil de mantener porque ya no hay forma de sobrescribir nada.
Herencia CSS
Algunos valores de las propiedades CSS que se han establecido para los elementos padre los heredan los elementos hijo, pero otros no.
Algunas propiedades no se heredan. Por ejemplo, si para un elemento se establece un ancho width del 50%, sus descendientes no tendrán un 50% de ancho con respecto al de sus padres.
Ejemplo de herencia
El color: red declarado en body lo heredan todos sus descendientes (el párrafo). El span declara su propio color, así que no hereda y usa el suyo:
<!DOCTYPE html>
<html>
<head>
<title>Título de la web</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p>
En este texto solo <span>el span</span>
será de color verde.
</p>
</body>
</html>body {
color: red;
}
span {
color: green;
}En este texto solo el span será de color verde.
Resumen
| Concepto | Qué decide | Idea clave |
|---|---|---|
| Especificidad | Qué regla gana cuando varias afectan al mismo elemento. | Cuanto más específico el selector, más puntos: !important > #id > en línea > .clase > elemento > *. |
!important | Fuerza una declaración por encima de las demás. | Va entre el valor y el ; final. Usar con moderación. |
| Herencia | Qué propiedades pasan de padres a hijos. | Unas se heredan (como color) y otras no (como width). Si el hijo declara la suya, usa la suya. |