Selectores

En una hoja de estilos, es necesario especificar a que elementos les afectan las reglas. Estas especificaciones se llaman selectores, los cuales permiten usarse de diferente forma en función de lo que se quiere modificar:

Selector	Ejemplo
Universal	* { }
Tipo de etiqueta	h1 { }
Clase	.nombre { } → <tag class="nombre"/>
Identificador	#nombre { } → <tag id="nombre"/>
Atributo	[attr=valor] → <tag attr="valor"/>

Además, hay una serie de combinadores que permiten hacer un CSS más condicional y personalizado:

Combinador	Ejemplo
Descendiente de selector	li a { } → <li><a/></li>
Hijo de selector	li > a { } (a diferencia del anterior, los "nietos" no se ven afectados)
Hermano adyacente	h1 + p { } → <h1/><p/><p/> (solo afecta el primer <p/>)
Hermano general	h1 ~ p { } → <h1/><p/><p/> (afecta a ambos <p/>)

Finalmente, existen también una serie de selectores por pseudo-clases. Estos permiten afectar a cualquiera de los selectores anteriormente descritos cuando se cumple alguna condición. La lista completa de pseudo-clases se encuentra en este enlace, y algunas de las más comunes son:

Pseudo-clase	Acción
a:link { }	Enlace "no visitado"
a:visited { }	Enlace "ya visitado"
button:active { }	Botón siendo activado por el usuario
li:first-child { }	Primer elemento de una lista
p:hover { }	El ratón está sobre el texto
input:focus { }	Se está esperando la entrada de texto

Especificidad

La especificidad se define como la manera mediante la cual los navegadores deciden qué valores de una propiedad son más relevantes para un elemento y, por tanto, serán aplicados.¹

Se aplica la siguiente norma de prioridad (cuanto mayor sea el número, más prioridad tiene):

1. Selectores de tipo
2. Selectores de clase, selectores de atributos y pseudo-clases
3. Selectores de identificador

Por lo tanto, si a un mismo elemento se está referenciando desde un selector de clase y otro de identificador, tendrá prioridad el de identificador y sus propiedades sobreescribirán a las de clase. Véase el siguiente ejemplo:

hoja.cssindex.html

.elemento {
    color: red;
    font-family: sans-serif;
}

#elemento {
    color: blue;
}

<!-- El elemento se renderizará con las siguientes propiedades: -->
<p
    id="elemento" class="elemento"
    style="color: blue; font-family: sans-serif;"/>

Selectores iguales

Si por algún motivo hubiese dos selectores idénticos, tendrá preferencia el último leído. Las propiedades se sobreescribirán en caso de conflicto a las últimas leídas.

Modificador !important

En CSS existe un modificador denominado #!important, el cual dará "sobreescribe" las reglas de prioridad. Sin embargo, por este motivo, usarlo supone una mala práctica y está totalmente desaconsejado, ya que rompe la filosofía de cascada del propio lenguaje.

Siempre se deberá buscar una alternativa antes de usar !important. En el ejemplo anterior, el renderizado sería diferente:

hoja.cssindex.html

.elemento {
    color: red !important;
    font-family: sans-serif;
}

#elemento {
    color: blue;
}

<!-- El elemento se renderizará con las siguientes propiedades: -->
<p
    id="elemento" class="elemento"
    style="color: red; font-family: sans-serif;"/>

Herencia

Dependiendo de las propiedades CSS, algunas se heredarán y otras no. Esto se puede saber mirando la documentación de cualquier propiedad en la web de MDN Web Docs.

Las propiedades se pueden categorizar en dos tipos:

• Propiedades heredadas: su valor por defecto se computará con respecto al valor del "padre".
• Propiedades no heredadas: su valor por defecto está fijado a initial.

Ejemplo

Los colores de letra (color) son propiedades heredadas, mientras que los bordes (border) no lo son.

Palabras Clave

Al hablar de herencia, es necesario hablar de 4 palabras clave, las cuales se pueden usar como valor en prácticamente cualquier propiedad. Estas tienen diferentes efectos:

	Efecto	Ejemplo
initial	Toma el valor inicial de la propiedad.	color: initial;
inherit	Fuerza (si es una propiedad no heredada) el valor al valor del elemento padre.	border: inherit;
revert	Revierte el valor en cascada del elemento, o al por defecto si no está siendo heredado.	color: revert;
unset	Si la propiedad es no heredada, tiene el mismo efecto que initial, y de inherit en caso contrario (es decir, "resetea" cualquier propiedad al valor por defecto).	background-color: unset;

---

1. Tomado de Especificidad, MDN Web Docs. ↩

---

Última actualización: 13 de febrero de 2022