Ejemplos:
p {} /* 0 0 0 1 */
span {} /* 0 0 0 1 */
p span {} /* 0 0 0 2 */
p > span {} /* 0 0 0 2 */
div p > span {} /* 0 0 0 3 */
El segundo espacio se incrementa por 3 cosas:
– selectores de clase
– selectores de pseudo-clase
– selectores de atributos (los aprenderemos muy pronto)
Cada vez que una regla cumple con uno de esos, incrementamos el valor de la segunda columna desde la derecha.
Ejemplos:
.name {} /* 0 0 1 0 */
.users .name {} /* 0 0 2 0 */
[href$='.pdf'] {} /* 0 0 1 0 */
:hover {} /* 0 0 1 0 */
Esto es lo que sucede cuando combinas selectores «espacio 2» con selectores «espacio 1»:
div .name {} /* 0 0 1 1 */
a[href$='.pdf'] {} /* 0 0 1 1 */
.pictures img:hover {} /* 0 0 2 1 */
"Espacio 3" contiene lo más importante que puede afectar la especificidad de tu CSS en un archivo CSS: el id.
Cada elemento puede tener asignado un atributo id, y podemos usarlo en nuestra hoja de estilo para apuntar al elemento.
Ejemplos:
#name {} /* 0 1 0 0 */
.user #name {} /* 0 1 1 0 */
#name span {} /* 0 1 0 1 */
«Espacio 4» se ve afectado por estilos en línea. Los estilos en línea son reglas CSS definidas en el HTML mismo, utilizando el atributo style.
Cualquier estilo en línea tendrá precedencia sobre cualquier regla definida en un archivo CSS externo, o dentro de la etiqueta style en el encabezado de la página.
Ejemplo:
<p style="color: red">Test</p> /* 1 0 0 0 */
Incluso si otra regla en el CSS define el color, esta regla de estilo en línea se aplicará.
Excepto por un caso: si se usa !important, lo que llena «espacio 5».
Una nota sobre !important
La especificidad no importa si una regla termina con !important:
p { font-size: 20px !important; }
Esa regla tendrá precedencia sobre cualquier regla con más especificidad.
Agregar !important en una regla CSS hará que esa regla sea más importante que cualquier otra regla, según las reglas de especificidad.
La única manera de que otra regla tome precedencia es tener !important también, y tener una especificidad más alta en los otros espacios menos importantes.
Generalmente, !important no debería tener lugar en tus archivos CSS. A veces lo uso para pruebas rápidas, para averiguar por qué una regla no se aplica. Si no aparece con !important, hay un problema en algún lugar.