soy Kseso y esto EsCSS

Especificidad css: Cuántas clases necesitas para anular 1 id

Especificidad css: Cuántas clases necesitas para anular 1 id

·Por Kseso ✎ 0

La especificación desarrolla la especificidad de un selector como un método de resolución de conflictos dentro de la cascada.
Así, la especificidad se calcula de una manera muy particular, basado en los valores de 4 categorías distintas. Con fines explicativos la especificación CSS2 representa estas categorías con las letras a, b, c, y d.
El valor de la letra b lo da el número de #id´s (identificadores únicos) del selector.
Y la letra c el número de clases.

Así que la cuestión es ¿cuánto debe valer c en un selector para anular a otro selector que sea b=1?
O dicho de otra forma, cuantas clases hay que enlazar para anular a 1 id?

Tengamos los siguiente códigos:

<div id="id" class="clase1 clase2 clase3... claseNº> </div> #id {background: blue;} .clase1 .clase2 .clase3 .clase4 .... claseNº {background: red;}

¿Que valor debe tener claseNº para que el div se vea con fondo rojo?

256 clases anulan 1 id

Esa es la respuesta: es necesario un selector con 256 clases para que sea más especifico que 1 sólo id

Y la mejor forma de demostrarlo es un ejemplo funcionando. Obra de @chriscoyier en codepen.io

La explicación técnica

La respuesta y el porqué de ese valor la tienes en éste hilo de stackoverflow

However, as many have already pointed out, the w3c CSS recommendation states that "Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity." So the geek in me just had to figure out just how large this base is.
It turns out that the "very large base" is 256 or 28 [*]

What this means is that a style specified with 0 ids and 256 class-names will over-ride a style specified with just 1 id. I tested this out with some fiddles:

So there is, effectively, a "point system," but it's not base 10. It's base 256. Here's how it works:

282 (or 65536) times the number of ids in the selector
+ 281 (or 256) times the number of class-names in the selector
+ 280 (or 1) times the number of tag-names in the selector

This isn't very practical for back-of-the-envelop exercises to communicate the concept.

Resumiendo: los navegadores codifican la especificidad en cadenas de 8 bits, por lo tanto, el valor máximo para el id es 255. Así que al encontrase con un valor superior (256) por el anidamiento de clases lo aplican.

Opera difiere, un poco:

Pero, pero, pero... esto no es así en todos los navegadores. Opera utiliza una base de 16 bits, así que para este navegador necesitarás la nada desdeñable cantidad de 65536 clases. Más info y referencias sobre esto último aquí.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso