Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Especificidad

Datos de búsqueda

Etiqueta ‘Especificidad’

HTML y CSS: diferencias entre clases (class) e identificadores (id)

Fecha de publicación: 2008/01/02

El atributo id

El atributo id sirve para identificar de forma única a un elemento dentro de un documento HTML.

El valor del atributo id de un elemento no puede repetirse en ningún otro atributo id del mismo documento.

El id es la parte del selector CSS que más especificidad CSS da: un valor de 100.

El atributo class

El valor del atributo class puede repetirse cuantas veces sea necesario, incluso puede llevar más de una clase:

class=”claseUnica” -> atributo class con una sola clase
class=”clase1 clase2” -> atributo class con más de una clase

El valor del atributo class no tiene ningún valor identificativo del elemento que lo contiene, únicamente sirve para asociarle los estilos al elemento.

En cuanto a especificidad CSS tiene un valor de 10.

Saber más

Este documento está disponible en formato OpenDocument

Datos del artículo:

CSS: Especificidad de los selectores (2)

Fecha de publicación: 2007/07/01

Anteriormente había hablado de la especificidad en CSS. En esta ocasión voy a tratar el tema de una forma más clara y añadir algunos detalles que se me pasaron en la ocasión anterior.

Valores a tener en cuenta: lista resumida

Se deben tener en cuenta los siguientes valores:

  • El identificador vale 100.
  • La clase vale 10.
  • El elemento vale 1.

Valores a tener en cuenta: lista completa

Elemento de selector Valor
Elemento (P, IMG, etc.) 1
Clase (valor del atributo class) 10
Identificador (valor del atributo id) 100
Atributo (elemento que contiene un atributo: a[title]). El valor especificado es el del atributo (title en el ejemplo). 10
Pseudo-clases (first-child, hover, active, visited, focus, etc.) 10
Pseudo-elementos (before, after, first-line, first-letter, etc.) 1

Referencia y enlaces relacionados

Datos del artículo:

CSS: Especificidad de los selectores

Fecha de publicación: 2007/05/03

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.

El ejemplo que da el W3C:

* {} /* 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 => 111

Y 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; }

Referencias y enlaces relacionados:

Datos del artículo:

Información del sitio

Outbook está basado en WordPress

Licencia Reconocimiento-NoComercial-CompartirIgual

Feed RSS: