La especificidad es muy útil para evitar el valor !important dentro de las propiedades CSS o tener que poner unas reglas forzosamente después de otras para que, de ese modo, puedan ser aplicadas.
Como calcular la especificidad de los selectores
Primer paso:
- Contar el número de atributos ID en el selector (=a).
- Contar el número de otros atributos y de pseudo-clases en el selector (=b).
- Contar el número de nombres de elementos en el selector (=c).
- Ignorar pseudo-elementos.
Segundo paso: Concatenación de los tres valores que se han obtenido (abc): si a=1 b=2 y c=0, se obtiene 120.
* {} /* a=0 b=0 c=0 -> specificity = 0 */
LI {} /* a=0 b=0 c=1 -> specificity = 1 */
UL LI {} /* a=0 b=0 c=2 -> specificity = 2 */
UL OL+LI {} /* a=0 b=0 c=3 -> specificity = 3 */
H1 + *[REL=up]{} /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red {} /* a=0 b=1 c=3 -> specificity = 13 */
LI.red.level {} /* a=0 b=2 c=1 -> specificity = 21 */
#x34y {} /* a=1 b=0 c=0 -> specificity = 100 */
Un ejemplo:
p => a=0 b=0 c=1 => 1
p.clase => a=0 b=1 c=1 => 11
#identificador p.clase => a=1 b=1 c=1 => 111Y el que de el número más alto es el más específico y el que se acaba aplicando. Si dos selectores tienen la misma especificidad tiene preferencia el que esté después del otro en el archivo CSS.
Ejemplos
En este caso, al ser igual de específicos se aplica el segundo, ya que va después:
p { color: pink; }
p { color: lime; }En este caso se aplica el primero, que es más específico:
div p { color: pink; }
p { color: lime; }