CSS:Especificidad CSS

De Foros del Web

En CSS los Floats son algo realmente difícil de entender (en principio), pues, así lo es también la Especificidad. Cascade Sheet Style (CSS) está formado por ID's, Classes, Pseudo-Classes, etc y debes entender como tu navegador entiende la relación que existe entre ellos. La Especificidad es la que causa que tu regla no se aplique a algunos elementos cuando en realidad debería aplicarse. Aquí aplicaremos matemáticas, pero no te preocupes no habrán formulas ni despejes matemáticos. Aunque siempre haremos trampa con calculadoras ;)

Organicemos las ideas: (Para entendelo mejor voy a hablar de puntos.)

Empieza en 0 puntos, Atributos 'Inline' poseen 1000 puntos ID's poseen 100 puntos Classes y Pseudo Classes poseen 10 puntos Los elementos o Pseudo-Elementos (body, div, img, h1, p, a, etc) 1 punto cada uno

Vamos con los ejemplos

a: h1
b: #contenedor h1
c: <div id="contenedor">
     <h1 style="font-size:2.4em">Esto es un Titulo</h1>
   </div>

• La especificidad de 'a' es 0,0,0,1 porque es solo 1 elemento
• La de 'b' es 0,1,0,1 porque es un ID + un elemento h1
• La especificidad de 'c' es 1,0,0,0 porque es un estilo inline

De ahi nos queda

• 1
• 101
• 1000

La tercera regla, es decir la 'c' se aplicará con preferencia a las otras dos por ser 1000 mayor que 101 y 1.

Otro ejemplo:

div#contenedor #columna p {
color:red;
font-size:1.2em;
}

De ahí nos queda:

div =           1
#contenedor = 100
#columna =    100
p =             1
Total=        202 

Con este número obtenemos un mejor target para nuestro elemento 'p' es decir es ´más específico, de ahí la palabra especificidad.

(Artículo en redacción e incompleto sujeto a cambios. Revisión 1)

---

--Ivor 07:37 2 jul 2009 (UTC)