Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Lección rápida: Entender la especificidad CSS

by
Difficulty:IntermediateLength:QuickLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

La "C" en CSS significa cascada. Es decir, que las reglas de estilo que aparecen más tarde en una hoja de estilos prevalecen sobre las que aparecen con anterioridad en la misma. Pero esto no es siempre así. Existe, además, algo que debes tener en cuenta: la especificidad. En esta lección rápida te mostraré cómo funciona.


Reglas de especificidad

La especificidad en CSS establece básicamente lo siguiente: cuanto más específico sea el selector de una regla CSS, mayor será su prevalencia sobre otras reglas aplicables al mismo elemento. Para descubrir qué selectores tienen un mayor valor de especificidad usa este sistema de cálculo:

  • Concede a cada selector HTML de un elemento 1 punto. Por ejemplo: al elemento p
  • Concede a cada selector de clase un valor de 10 puntos. Por ejemplo: .column
  • Concede a cada selector de ID una valor de 100 puntos. Ejemplo: #wrap
  • Suma todos lo puntos de cada selector de una regla CSS concreta para obtener su valor total.

Por ejemplo

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.