CSS: pseudo-elemento o pseudo-clase X desconocidos

Las pseudo-clases CSS (como :hover, :focus, :nth-child()) seleccionan elementos basándose en su estado o posición, mientras que los pseudo-elementos (como ::before, ::after, ::placeholder) apuntan a partes específicas de un elemento. La especificación CSS distingue entre ambos usando dos puntos simples para pseudo-clases y dos puntos dobles para pseudo-elementos. Aunque los navegadores aún soportan la sintaxis heredada de dos puntos simples para pseudo-elementos más antiguos como :before y :after por compatibilidad hacia atrás, el validador espera la forma moderna de dos puntos dobles ::before y ::after.

Por qué esto es importante

Cumplimiento de estándares. La sintaxis de dos puntos dobles para pseudo-elementos se introdujo en CSS3 para distinguir claramente los pseudo-elementos de las pseudo-clases. Usar la sintaxis correcta hace que tu código sea más legible y preparado para el futuro.

Detectar errores reales. Una pseudo-clase mal escrita como :foucs o :hovr fallará silenciosamente — el navegador simplemente ignora toda la regla. El validador detecta estos errores tipográficos antes de que causen problemas misteriosos de estilos en producción.

Limitaciones del perfil del validador. El validador CSS del W3C verifica tus estilos contra un perfil CSS específico. Los selectores más nuevos como :has(), :is(), o :where() pueden no ser reconocidos si el validador está configurado a un perfil más antiguo como CSS Level 2.1 o incluso CSS Level 3. Los selectores con prefijo de proveedor como ::-webkit-input-placeholder o ::-moz-placeholder nunca forman parte de ningún perfil estándar y siempre serán marcados.

Causas comunes

1. Errores tipográficos — :hovr, :foucs, ::plceholder, etc.
2. Dos puntos simples en pseudo-elementos — :before, :after, :first-line, :first-letter en lugar de sus equivalentes de dos puntos dobles.
3. Selectores con prefijo de proveedor — ::-webkit-input-placeholder, ::-moz-selection, :-ms-input-placeholder.
4. Selectores modernos en perfiles más antiguos — :has(), :is(), :where(), ::marker, :focus-visible pueden no ser reconocidos dependiendo de la configuración del nivel CSS del validador.

Cómo solucionarlo

• Verifica la ortografía de todas las pseudo-clases y pseudo-elementos.
• Usa dos puntos dobles para pseudo-elementos: ::before, ::after, ::first-line, ::first-letter, ::placeholder, ::marker, ::selection.
• Reemplaza selectores con prefijo de proveedor por sus equivalentes estándar. Si aún necesitas el prefijo para soporte del navegador, coloca la versión estándar junto a él y acepta que la línea con prefijo puede producir una advertencia.
• Actualiza el perfil del validador a un nivel CSS más nuevo si intencionalmente estás usando selectores modernos como :has() o :focus-visible.

Ejemplos

Incorrecto — dispara la advertencia

<style>
  /* Error tipográfico en pseudo-clase */
  a:hovr {
    color: red;
  }

  /* Dos puntos simples en pseudo-elemento */
  p:before {
    content: "→ ";
  }

  /* Pseudo-elemento con prefijo de proveedor sin versión estándar */
  input::-webkit-input-placeholder {
    color: gray;
  }
</style>

Cada una de estas reglas disparará una advertencia de “pseudo-elemento o pseudo-clase desconocidos”. La primera es un simple error tipográfico, la segunda usa sintaxis anticuada de dos puntos simples, y la tercera es un prefijo de proveedor no estándar.

Correcto — CSS válido

<style>
  /* Error tipográfico corregido */
  a:hover {
    color: red;
  }

  /* Dos puntos dobles para pseudo-elemento */
  p::before {
    content: "→ ";
  }

  /* Pseudo-elemento estándar */
  input::placeholder {
    color: gray;
  }
</style>

Manejando selectores modernos

Algunas pseudo-clases modernas como :has() y :focus-visible están bien soportadas en los navegadores pero pueden no ser reconocidas aún por el validador. Si necesitas usarlas, puedes reconocer la advertencia o estructurar tu CSS para que el selector moderno mejore en lugar de reemplazar los estilos base:

<style>
  /* Estilo base que siempre se aplica */
  .card {
    border: 1px solid transparent;
  }

  /* Mejora usando :has() — puede advertir en el validador */
  .card:has(img) {
    border-color: #ccc;
  }

  /* :focus-visible para anillos de enfoque solo de teclado */
  button:focus-visible {
    outline: 2px solid blue;
  }
</style>

Estos selectores son CSS válido y funcionan en navegadores modernos. Si el validador los marca, considera cambiar el perfil del validador al último nivel CSS, o trata las advertencias como informativas en lugar de errores.

Más información:

MDN Reference

MDN Web Docs: Pseudo-classes

→

MDN Reference

MDN Web Docs: Pseudo-elements

→