✅Cómo Aplicar Estilos Globales en tu WordPress usando * en CSS

Uno de los atajos más potentes y peligrosos a la vez en CSS es el selector universal *. Y sí, como su nombre indica, sirve para seleccionar absolutamente todos los elementos de tu web. Pero… ¿para qué sirve realmente? ¿Y cuándo tiene sentido usarlo?

En este artículo te explico cómo lo uso yo en mis proyectos WordPress cuando quiero aplicar estilos globales de forma rápida y efectiva.

¿Qué es el selector *?

Es simplemente un selector universal que se refiere a todos los elementos del DOM. Así de literal.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Esto significa: aplica estos estilos a todo lo que existe en tu web. Desde body, divs, enlaces, imágenes, hasta formularios, botones, y cualquier cosa que se pinte en pantalla.

¿Cuándo usarlo (y cuándo no)?

Yo lo uso en dos contextos:

1. Al inicio del proyecto, para establecer una base de estilos coherente (reset).
2. Para experimentar rápidamente con un cambio de estilo global, como redondear todos los elementos, aplicar transiciones, etc.

Ejemplo real que estoy usando ahora en PluginsWeb.es:

* {
  border-radius: 10px !important;
}

Con esta simple línea, consigo que todas las cajas, botones, inputs, imágenes, iframes y más tengan bordes redondeados de forma coherente. El resultado visual es sorprendente: todo se ve más suave y estéticamente unificado sin tener que ir clase por clase.

¿Qué puedes hacer con *?

Aquí van algunos ejemplos útiles:

Añadir transición global

* {
  transition: all 0.3s ease;
}

Esto hace que cualquier cambio de estilo (hover, enfoque, etc.) se vea animado.

Hacer que todos los textos usen antialiasing

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Aplicar un estilo de fuente general

* {
  font-family: 'Outfit', sans-serif;
}

Dar un sombreado sutil a todo

* {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

Peligros de usar * sin control

Aunque puede parecer tentador, usar * para todo sin pensar tiene riesgos:

• Rendimiento: el navegador tiene que aplicar ese estilo a absolutamente todo, lo que puede afectar en sitios muy cargados.
• Conflictos: puedes sobrescribir estilos que vienen de tu tema o de plugins sin querer.
• Dificultad para depurar: si algo cambia y no sabes por qué, puede ser por ese *.

Por eso, si vas a usarlo, ten claro el contexto y prueba bien en todos los navegadores.

Alternativa: :where(*) (más eficiente)

Si quieres algo más suave, puedes usar:

:where(*) {
  box-sizing: border-box;
}

Este selector no tiene prioridad y es más seguro para resets.

Conclusión

El selector * en CSS puede ser un aliado muy potente para aplicar estilos globales y unificar el diseño de tu web de forma rápida. Yo lo uso cuando quiero experimentar con visuales coherentes o simplemente cuando quiero ver todo más limpio sin tener que tocar cada clase manualmente.

Eso sí: úsalo con cuidado, porque un cambio tan global puede afectar a zonas que no esperabas.

¿Quieres probarlo? Añade tu regla en el “CSS adicional” del personalizador de WordPress y verás el cambio en tiempo real.