Resumen y objetivo

Este tutorial muestra, con todo lujo de detalles, cómo cambiar únicamente el color del primer párrafo de cada entrada en WordPress usando CSS. Cubriré las diferencias entre selectores, ejemplos prácticos para temas clásicos y bloques (Gutenberg), dónde añadir el CSS y soluciones a problemas habituales (especificidad, caché, bloques que no son párrafos, enlaces dentro del párrafo, etc.).

Conceptos clave

• :first-child selecciona un elemento que es el primer hijo directo de su padre.
• :first-of-type selecciona el primer elemento de ese tipo (p, h2, etc.) dentro de su padre, aunque no sea el primer hijo absoluto.
• Especificidad: estilos más específicos o con !important pueden sobreescribir tu regla.
• Bloques de Gutenberg: la estructura HTML puede envolver el párrafo en elementos .wp-block-, por lo que hay que usar selectores que contemplen esa estructura.

Selecciones CSS recomendadas

Dependiendo del tema, el contenedor del contenido suele llamarse .entry-content, .post-content o similar. A continuación tienes varias opciones, de menos a más robustas.

1) Selector simple (cuando el primer párrafo es hijo directo)

Usa esto si el primer nodo dentro del contenedor es realmente el párrafo:

.entry-content > p:first-child {
  color: #c0392b
}

2) Selector por tipo (cuando el párrafo no es el primer hijo, p. ej. hay un bloque HTML previo)

Este selector busca el primer elemento ltpgt dentro del contenedor, aunque no sea el primer hijo.

.entry-content p:first-of-type {
  color: #c0392b
}

3) Selector para temas que usan otras clases (seguro y específico)

Si tu tema usa clases como .post o .single-post, añade esas clases para aumentar especificidad y evitar afectar listas, widgets u otras zonas.

.single-post .entry-content p:first-of-type,
.post .entry-content p:first-of-type {
  color: #c0392b
}

4) Selector para Gutenberg (bloques)

Gutenberg envuelve párrafos en .wp-block-paragraph a veces el primer bloque no es párrafo. Estas reglas cubren distintos escenarios:

/ Primer bloque que sea párrafo /
.entry-content .wp-block-paragraph:first-of-type,
.entry-content .wp-block .wp-block-paragraph:first-of-type {
  color: #c0392b
}

/ Cualquier primer párrafo dentro del contenedor (fallback) /
.entry-content p:first-of-type {
  color: #c0392b
}

Ejemplos prácticos y variantes

Color del primer párrafo y enlaces en su interior

Si quieres que los enlaces mantengan un color distinto dentro del primer párrafo, añade reglas específicas:

.entry-content p:first-of-type {
  color: #2c3e50 / color del texto del párrafo /
}

.entry-content p:first-of-type a {
  color: #e67e22 / color de los enlaces dentro del primer párrafo /
}

Forzar con !important (último recurso)

Si el tema aplica un estilo muy específico que te impide cambiar el color, puedes usar !important, pero úsalo solo si no hay otra forma.

.entry-content p:first-of-type {
  color: #16a085 !important
}

Excluir extractos, widgets u otras áreas

Si no quieres afectar extractos de entradas (por ejemplo .entry-summary) o widgets, puedes excluirlos:

/ Aplica solo en entradas completas, no en extractos /
.single .entry-content p:first-of-type {
  color: #8e44ad
}

/ Evitar widgets que usen .entry-content o .post /
.widget .entry-content p:first-of-type,
.archive .entry-content p:first-of-type {
  color: inherit
}

Dónde añadir el CSS

1. Apariencia → Personalizar → CSS adicional: método sencillo y seguro para la mayoría de usuarios.
2. Hoja style.css del tema hijo: recomendable si controlas el tema con un child theme.
3. Plugin de CSS personalizado: plugins tipo Simple Custom CSS si prefieres aislación.
4. Inyectar desde functions.php (ejemplo con wp_add_inline_style): útil cuando quieres emparejar estilos con la hoja del tema. Ejemplo abajo.

Ejemplo: añadir CSS inline desde functions.php

function mi_tema_estilos_personalizados() {
    css = 
    .single-post .entry-content p:first-of-type {
        color: #d35400
    }
    
    // theme-style-handle debe ser el handle de la hoja de estilo del tema activa.
    wp_add_inline_style( theme-style-handle, css )
}
add_action( wp_enqueue_scripts, mi_tema_estilos_personalizados )

Problemas habituales y soluciones

• El color no cambia: revisa la especificidad, usa la herramienta Inspector del navegador para ver qué regla se aplica y si una regla posterior la sobrescribe.
• El primer bloque no es párrafo: si el primer bloque es una imagen, portada o cita, usa p:first-of-type o localiza el primer bloque-paragraph con .wp-block-paragraph:first-of-type.
• CSS en caché: vacía la caché del sitio y del navegador tras cambiar estilos.
• Editor visual vs salida: comprueba el frontend el editor de bloques puede mostrar estructura diferente.
• Adaptación móvil: puedes mantener el mismo color en móvil o ajustar mediante media queries si quieres distinto comportamiento.

Consideraciones de accesibilidad

• Comprueba contraste suficiente entre el color del párrafo y el fondo para cumplir WCAG. Usa herramientas de comprobación de contraste.
• No uses color como único medio para transmitir información importante.

Checklist rápido antes de publicar

1. Usar el selector correcto (.entry-content p:first-of-type o .wp-block-paragraph:first-of-type).
2. Añadir el CSS en un lugar persistente (Customizer o child theme).
3. Probar distintas entradas: con imagen destacada, galería, cita, etc.
4. Comprobar en móvil y escritorio.
5. Limpiar caché si procede.

Ejemplo completo de CSS final (lista para pegar)

/ Regla principal: cambia el color solo del primer párrafo de cada entrada /
.single-post .entry-content p:first-of-type,
.post .entry-content p:first-of-type,
.entry-content .wp-block-paragraph:first-of-type {
  color: #0d3b66
}

/ Enlaces dentro del primer párrafo /
.single-post .entry-content p:first-of-type a {
  color: #ff6b6b
  text-decoration: underline
}

/ Fallback si el tema aplica estilos muy específicos (usar solo si es necesario) /
/ .single-post .entry-content p:first-of-type { color: #0d3b66 !important } /

Conclusión

Con unas pocas reglas CSS y aplicándolas en el lugar adecuado, puedes controlar el color del primer párrafo de cada entrada de forma fiable. Empieza probando los selectores p:first-of-type y p:first-child dentro del contenedor principal (.entry-content o la clase que use tu tema). Ajusta la especificidad o utiliza un child theme si necesitas persistencia y orden en tus estilos.