Cómo sobrescribir estilos CSS en WordPress

En CSS, sobrescribir estilo es algo que las personas usuarias de WordPress hacemos constantemente. Pero a veces no es tan fácil como nos gustaría…

Si alguna vez te has preguntado por qué un estilo CSS que has escrito no se aplica en tu sitio WordPress, es posible que te hayas topado con una cosa llamada especificidad.

Pero en WordPress, además de la especificidad clásica de CSS, hay una serie de particularidades que hacen que algunas reglas tengan más «peso» que otras, dependiendo de dónde y cómo se declaren.

En este artículo te explico, paso a paso, cómo funciona la especificidad en CSS y cómo WordPress añade su propia capa de complejidad.

Para que sepas exactamente cómo sobrescribir cualquier estilo que se te resista (con mayor o menor elegancia, eso sí).

1. Especificidad en CSS (la explicación completa)

La especificidad se calcula con una fórmula de cuatro números:

(0,0,0,0)

De mayor a menor, cada número representa:

(1,0,0,0) – Estilos en línea (por ejemplo, style="…")

(0,1,0,0) – Selectores de ID (#id)

(0,0,1,0) – Clases (.clase), pseudoclases (:hover) y atributos ([href$=".pdf"])

(0,0,0,1) – Etiquetas (div, a, p…) y pseudoelementos (::before, ::after)

Se compara de izquierda a derecha. Por ejemplo:

(0, 1, 0, 0) gana a (0, 0, 10, 0)

(1, 0, 0, 0) gana a cualquier otra cosa que no tenga !important

¿Y el famoso !important? Gana siempre. Ignora la especificidad y la cascada. Por eso es una mala práctica y es mejor evitarlo salvo que no haya otra opción, por ejemplo, si te estás peleando con un plugin que lleva un !important.

Ejemplo real de especificidad en CSS

Vamos a ver cómo funciona y en qué debemos fijarnos:

Vamos a suponer que tenemos este HTML:

HTML

  <article class="hightlight">
      <section class="section">
        <p id="featured">Texto de ejemplo</p>
      </section>
	</article> 

Y vamos a declarar estas dos reglas: la A y la B.

CSS – Regla A

article.hightlight section.section p {
  color: blue;
}

Hay 2 clases .hightlight, .section y 3 etiquetas article, section, p.

Entonces, la especificidad es (0, 0, 2, 3).

CSS – Regla B

#featured {
  color: red;
}

Hay un ID, #featured.

Entonces, la especificidad es (0, 1, 0, 0). Gana la regla B.

Aunque Regla A tiene más selectores, la especificidad del ID (0,1,0,0) es imbatible. Es lo más específico que se puede ser, porque un elemento HTML solo puede tener un único ID. Solo se podría superar si hubiera un !important o con estilos en línea, que tendrían especificidad (1,0,0,0).

¿Y si ambas reglas tuvieran !important? Entonces, gana la regla que tenga más especificidad.

¿Y si ambas reglas tienen la misma especificidad? Entonces, gana la que esté más abajo en el CSS (la última que se aplica).

Otro ejemplo

Cuando una de las reglas tiene un ID, el ID salta a la vista y es muy fácil identificar (valga la redundancia jaja) que esa regla va a ser más específica. Porque un ID solo se puede superar con !important o estilos en línea.

¿Pero qué pasa cuando hay varias clases y etiquetas? Vamos a verlo.

HTML

<article class="card highlight featured">
  <section class="section">
    <p>Texto de ejemplo</p>
  </section>
</article>

CSS – Regla A

article.card.highlight.featured p {
  color: green;
}

Hay 3 clases: .card, .highlight, .featured y 2 etiquetas: article, p
En total la especificidad es (0, 0, 3, 2).

CSS – Regla B

article.card section.section p {
  color: blue;
}

Hay 2 clases: .card, .section y 3 etiquetas article, section, p
En total la especificidad es (0, 0, 2, 3).

Se aplicará el estilo de Regla A (color: green;) porque la regla A tiene más clases. Aunque la regla B tenga más etiquetas, las clases pesan más que las etiquetas en la jerarquía de especificidad.

La especificidad se compara de izquierda a derecha

Por muchas etiquetas que tenga una regla, si yo le pongo una única clase a otra regla, ya gana. Es decir: (0,0,1,0) gana a (0,0,0,56).

Recuerda: la especificidad se compara numéricamente de izquierda a derecha, no se suma entre columnas.

Y lo mismo con el resto de niveles:

Un ID (#) gana a cualquier número de clases o etiquetas.

Un estilo en línea (style="…") gana a cualquier otra cosa, salvo !important.

Puedes usar esta herramienta online sin distracciones para calcular la especificidad de cualquier selector: Online CSS Specificity Calculator de Project Wallace.

Un truco: usar el inspector del navegador

Cuando hay un montón de clases y etiquetas en una regla y queremos declarar una regla más específica, en vez de contar manualmente cuántas clases o etiquetas están seleccionadas, lo más práctico es usar el inspector del navegador.

Cuando inspeccionas un elemento y pones el cursor encima, aparece un tooltip que te dice qué especificidad tiene ese elemento. Como se puede ver en esta captura, ese párrafo tiene especificidad (0,0,1) porque solo tiene una etiqueta, el párrafo.

En la mayoría de los navegadores, cuando inspeccionas un elemento y te muestra la especificidad de una regla, normalmente verás solo tres valores en lugar de los cuatro que usamos al explicar la especificidad teóricamente.

El navegador solo muestra las tres últimas reglas (ID, Clases/Atributos/Pseudoclases, Etiquetas/Pseudoelementos).

Esto es porque omite el primer valor, porque los estilos en línea no aparecen como reglas CSS normales en el panel.

Es decir, si inspeccionas un estilo escrito dentro de style="…", lo verás como “element.style” y no tiene una especificidad calculada visible (porque no es una regla de CSS con selector).

Por lo tanto, si usas estilos en línea, el navegador no muestra la especificidad, directamente lo aplicará con la prioridad máxima (1,0,0,0) aunque no te muestre el valor como tal.

Tabla de especificidad CSS

Ten a mano esta tabla, que seguro que te viene bien.

Los selectores * y :where() son muy interesantes, porque como no tienen especificidad, se pueden sobrescribir muy fácilmente. Son ideales para sentar las bases y que no interfieran nunca con reglas más específicas.

Y ahora que dominamos la especificidad en CSS, vamos a ver qué particularidades tiene el CSS en WordPress.

2. Especificidad en WordPress (la que nadie te explica)

En WordPress, además de la especificidad del selector, importa dónde se declara el CSS y cuándo se carga, porque esto altera el orden en que se aplican las reglas.

De mayor a menor prioridad real en WordPress:

1. Estilos con !important

Ganan siempre, a no ser que otro estilo con !important tenga más especificidad.

2. Estilos escritos directamente en el contenido (<style> o style="...")

Si añades un bloque HTML con estilo dentro de una página o entrada, ese estilo manda mucho, porque WordPress lo carga muy al final.

3. CSS inline que genera el editor de bloques

Muchos bloques generan CSS automáticamente con clases únicas, como por ejemplo .wp-block-post-title-abc123 o así. Estas clases no tienen más especificidad por sí mismas, pero al ser únicas y generadas dinámicamente, a veces es más complicado sobrescribirlas sin inspeccionar bien el HTML.

4. CSS del Personalizador (Apariencia > Personalizar > CSS adicional)

Se carga después del CSS del tema, por lo que tiene más peso si la especificidad es igual.

5. Estilos de plugins

Normalmente se carga después del tema, pero antes del Personalizador. Algunos usan !important, lo que complica más las cosas.

Además, algunos plugins insertan estilos en línea desde JavaScript. En ese caso, tendrás que sobrescribirlos con !important o manipularlos también desde JS.

6. CSS del tema hijo (style.css)

Se carga después del tema padre. Si está bien configurado, sus estilos ganan. Siempre es mejor meter los estilos aquí y no en el Personalizador.

7. CSS del tema padre (style.css)

Es lo primero que se carga después del core. Si no tiene !important y escribes un estilo parecido después, lo sobrescribes sin problema.

8. Core de WordPress

En general, cualquier estilo definido en un tema o plugin va a sobrescribir a los del core, porque estos últimos cargan primero y tienen menor especificidad.

3. ¿Por qué tu estilo no se aplica?

Cuando tu CSS no funciona como esperas:

1. Inspecciona el elemento en el navegador.
2. Mira en la pestaña Computed dónde está definido el estilo que lo está pisando.
3. Revisa si usa !important.
4. Aumenta la especificidad de tu selector.
5. Asegúrate de que tu CSS se carga después.
6. Y si todo falla… usa !important, pero solo si no hay más remedio.

4. El clásico drama del Personalizador

Copias un estilo desde el Personalizador y lo pegas en tu hoja de estilos (style.css) y… deja de funcionar. ¿Por qué?

Porque el Personalizador se carga después, y su CSS gana por orden en la cascada, aunque la especificidad sea la misma.

Ahora sabes lo importante que es saber cómo funciona WordPress.

5. Lo que yo te recomiendo

No abuses de !important

Úsalo solo cuando tengas total seguridad de que no puedes resolverlo aumentando la especificidad. Muchas veces, con añadir un body delante, ya consigues la especificidad suficiente. Pruébalo.

No abuses del Personalizador

Usa el Personalizador si necesitas CSS puntual que sobrescriba todo. Pero lo mejor, por rendimiento, es declarar los estilos en la hoja de estilos del tema hijo.

👉 Si prefieres olvidarte de peleas con el CSS y tener una web bien diseñada desde el principio, aquí puedes ver cómo trabajo el diseño de webs corporativas en WordPress.

Aprende a usar el inspector del navegador

Es tu mejor aliado a la hora de sobrescribir estilos CSS. Las reglas activas se ven normales; las anuladas aparecen tachadas o con un indicador de que fueron sobrescritas. Además, el inspector suele listar primero la regla ganadora (más arriba) y más abajo las menos prioritarias.

Te lo ha contado

Ana Cirujano

Soy diseñadora y ayudo a negocios online a fortalecer su marca, mejorar la experiencia de usuario y obtener mejores resultados.

Quién soy Cómo te puedo ayudar