Cálculo de especificidad: estilo inline, ID, clase y elemento
Calcule los niveles de especificidad y prediga qué regla prevalecerá en cualquier conflicto de estilos.
Cálculo de especificidad: estilo inline, ID, clase y elemento es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué es la especificidad?
La especificidad determina qué regla CSS gana cuando varias reglas se dirigen al mismo elemento y propiedad. Se calcula como una puntuación de cuatro partes: (A, B, C, D), donde A tiene el valor más alto y D el más bajo.
Componentes de la especificidad
Las cuatro columnas:
- A: estilos en línea (atributo style="") = 1,0,0,0
- B: selectores de ID (#id) = 0,1,0,0
- C: selectores de clase (.class), selectores de atributos y pseudoclases = 0,0,1,0
- D: selectores de tipo (elemento) y pseudoelementos = 0,0,0,1
Ejemplos de especificidad
Cálculo de la especificidad:
<p>Plain paragraph — matches <code>p</code></p>
<p class="card">Card paragraph — matches <code>.card</code></p>
<div id="header">
Header block — matches <code>#header</code>
<span class="logo">Logo — matches <code>#header .logo</code></span>
</div>
<p class="intro">Intro paragraph — matches <code>p.intro</code></p>
<nav class="nav">
<a href="#" class="nav-link active">Active link — matches <code>.nav .nav-link.active</code></a>
</nav>El selector universal no tiene especificidad
El selector universal *, los combinadores (+, >, ~, espacio) y la pseudoclase :where() contribuyen con cero (0,0,0,0) a la especificidad.
Los estilos en línea ganan
Los estilos en línea (atributo style="") tienen la especificidad más alta (1,0,0,0). Solo !important puede anularlos desde una regla de una hoja de estilos.
Comparación de puntuaciones de especificidad
Compare de izquierda a derecha. La primera columna en la que las puntuaciones difieren determina cuál gana. (0,1,0,0) gana a (0,0,99,99) porque la columna de ID gana inmediatamente.
Especificidad de :is(), :not() y :has()
:is(), :not() y :has() adoptan la especificidad de su argumento más específico:
<div id="header">:is(#header, .nav) match via ID</div>
<nav class="nav">:is(#header, .nav) match via class</nav>
<button class="active">Active button (excluded from :not(.active))</button>
<button>Plain button (matches :not(.active))</button>
<p class="p">:where(.p) paragraph</p>Especificidad de nth-child
:nth-child(), :first-child, :hover y las demás pseudoclases añaden (0,0,1,0), es decir, una especificidad de nivel de clase.
Especificidad de los pseudoelementos
::before, ::after, ::first-line, etc. añaden (0,0,0,1), es decir, una especificidad de nivel de elemento. Se encuentran en la columna D.
La especificidad no es herencia
La especificidad se calcula por propiedad y por elemento. Una regla con mayor especificidad gana para una propiedad determinada, pero los valores heredados de un elemento principal con alta especificidad no ganan a las reglas directas más específicas del elemento secundario.
Herramientas para calcular la especificidad
Use herramientas en línea como specificity.keegan.st o DevTools del navegador para verificar la especificidad. En DevTools, los estilos tachados en el panel Styles indican que ganó una regla más específica.
Comprobación rápida
¿Qué selector tiene mayor especificidad: #sidebar .link o .nav .nav-item .nav-link.active?
Resumen
Las puntuaciones de especificidad son (A, B, C, D): estilos en línea, ID, clases/atributos/pseudoclases y elementos/pseudoelementos. Compare de izquierda a derecha: gana la primera columna diferente. :where() siempre contribuye con cero. Un ID gana a cualquier cantidad de selectores de clase. Use el panel Styles de DevTools para ver qué reglas ganan y por qué.
Preguntas frecuentes
¿La lección «Cálculo de especificidad: estilo inline, ID, clase y elemento» es gratis?
Sí — el texto completo de «Cálculo de especificidad: estilo inline, ID, clase y elemento» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Cálculo de especificidad: estilo inline, ID, clase y elemento»?
Calcule los niveles de especificidad y prediga qué regla prevalecerá en cualquier conflicto de estilos. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Cálculo de especificidad: estilo inline, ID, clase y elemento»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Cálculo de especificidad: estilo inline, ID, clase y elemento
- La cascada: origen y orden
- !important: cuándo usarlo y por qué no
- Herencia y propiedad all