CSS: Pseudo-elemento ou pseudo-classe X desconhecido

Pseudo-classes CSS (como :hover, :focus, :nth-child()) selecionam elementos com base no seu estado ou posição, enquanto pseudo-elementos (como ::before, ::after, ::placeholder) visam partes específicas de um elemento. A especificação CSS distingue entre os dois usando dois pontos simples para pseudo-classes e dois pontos duplos para pseudo-elementos. Embora os browsers ainda suportem a sintaxe legada de dois pontos simples para pseudo-elementos mais antigos como :before e :after por compatibilidade com versões anteriores, o validador espera a forma moderna de dois pontos duplos ::before e ::after.

Por que isto é importante

Conformidade com os padrões. A sintaxe de dois pontos duplos para pseudo-elementos foi introduzida no CSS3 para distinguir claramente pseudo-elementos de pseudo-classes. Usar a sintaxe correta torna o seu código mais legível e preparado para o futuro.

Detetar bugs reais. Uma pseudo-classe mal escrita como :foucs ou :hovr falhará silenciosamente — o browser simplesmente ignora toda a regra. O validador deteta estes erros tipográficos antes que causem problemas misteriosos de estilo em produção.

Limitações do perfil do validador. O validador CSS do W3C verifica os seus estilos contra um perfil CSS específico. Seletores mais novos como :has(), :is(), ou :where() podem não ser reconhecidos se o validador estiver configurado para um perfil mais antigo como CSS Level 2.1 ou mesmo CSS Level 3. Seletores com prefixo de fornecedor como ::-webkit-input-placeholder ou ::-moz-placeholder nunca fazem parte de qualquer perfil padrão e serão sempre sinalizados.

Causas comuns

1. Erros tipográficos — :hovr, :foucs, ::plceholder, etc.
2. Dois pontos simples em pseudo-elementos — :before, :after, :first-line, :first-letter em vez dos seus equivalentes de dois pontos duplos.
3. Seletores com prefixo de fornecedor — ::-webkit-input-placeholder, ::-moz-selection, :-ms-input-placeholder.
4. Seletores modernos em perfis mais antigos — :has(), :is(), :where(), ::marker, :focus-visible podem não ser reconhecidos dependendo da configuração do nível CSS do validador.

Como corrigir

• Verifique a ortografia de todas as pseudo-classes e pseudo-elementos.
• Use dois pontos duplos para pseudo-elementos: ::before, ::after, ::first-line, ::first-letter, ::placeholder, ::marker, ::selection.
• Substitua seletores com prefixo de fornecedor pelas suas equivalentes padrão. Se ainda precisar do prefixo para suporte do browser, coloque a versão padrão ao lado e aceite que a linha com prefixo pode produzir um aviso.
• Atualize o perfil do validador para um nível CSS mais recente se estiver intencionalmente a usar seletores modernos como :has() ou :focus-visible.

Exemplos

Incorreto — desencadeia o aviso

<style>
  /* Erro tipográfico na pseudo-classe */
  a:hovr {
    color: red;
  }

  /* Dois pontos simples em pseudo-elemento */
  p:before {
    content: "→ ";
  }

  /* Pseudo-elemento com prefixo de fornecedor sem versão padrão */
  input::-webkit-input-placeholder {
    color: gray;
  }
</style>

Cada uma destas regras desencadeará um aviso “Pseudo-elemento ou pseudo-classe desconhecido”. A primeira é um simples erro tipográfico, a segunda usa sintaxe de dois pontos simples desatualizada, e a terceira é um prefixo de fornecedor não-padrão.

Correto — CSS válido

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

  /* Dois pontos duplos para pseudo-elemento */
  p::before {
    content: "→ ";
  }

  /* Pseudo-elemento padrão */
  input::placeholder {
    color: gray;
  }
</style>

Lidar com seletores modernos

Algumas pseudo-classes modernas como :has() e :focus-visible são bem suportadas nos browsers mas podem ainda não ser reconhecidas pelo validador. Se precisar de as usar, pode reconhecer o aviso ou estruturar o seu CSS para que o seletor moderno melhore em vez de substituir os estilos base:

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

  /* Melhoria usando :has() — pode avisar no validador */
  .card:has(img) {
    border-color: #ccc;
  }

  /* :focus-visible para anéis de foco apenas com teclado */
  button:focus-visible {
    outline: 2px solid blue;
  }
</style>

Estes seletores são CSS válido e funcionam em browsers modernos. Se o validador os sinalizar, considere mudar o perfil do validador para o nível CSS mais recente, ou trate os avisos como informativos em vez de erros.

Saiba mais:

MDN Reference

MDN Web Docs: Pseudo-classes

→

MDN Reference

MDN Web Docs: Pseudo-elements

→