Skip to main content

📘 Documentação: CSS :heading e :heading() | CSS

  • Documentação: CSS :heading e :heading() | CSS

📌 O que é este tutorial​

Esse tutorial aborda novas formas de selecionar e estilizar títulos (headings) em CSS usando duas seletores inovadores:

  • :heading — pseudo-classe CSS que seleciona todos os títulos.
  • :heading() — pseudo-classe com argumentos que seleciona níveis específicos de títulos.

Esses recursos fazem parte de propostas modernas para tornar o CSS mais semântico e flexível ao trabalhar com headings (títulos) sem precisar listar todos os elementos manualmente (h1, h2, h3...). ([alvaromontoro.com][1])

🧱 O problema que existe hoje​

Atualmente, para estilizar todos os títulos numa página HTML, precisamos escrever assim:

h1, h2, h3, h4, h5, h6 {
  /* estilos aqui */
}

Essa forma funciona, mas:

  • é verbosa;
  • não é semântica (são muitos seletores separados);
  • torna difícil selecionar apenas certo nível específico de headings sem repetição manual. ([alvaromontoro.com][1])

🔍 :heading — selecionar todos os headings​

📌 O que faz​

O seletor :heading seleciona todos os elementos de título (h1 a h6) em um documento CSS de forma única.

Ou seja:

:heading {
  color: red;
}

é equivalente a:

h1, h2, h3, h4, h5, h6 {
  color: red;
}

📌 Importante:

  • Ele seleciona todos os headings sem distinguir o nível (h1, h2 etc.).
  • Ele não seleciona elementos que tenham papel semântico de heading via ARIA (role="heading"). ([alvaromontoro.com][1])

🔹 Exemplo: títulos e subtítulos no HTML serão estilizados de forma uniforme:

<h1>Título principal</h1>
<h3>Subtítulo</h3>

🧠 :heading() — selecionar níveis específicos​

Se você quiser ser mais específico que “todos os headings”, pode usar a versão funcional:

:heading(2, 3) {
  color: blue;
}

👉 Isso estiliza apenas os headings de nível 2 (h2) e nível 3 (h3). Ou seja, não precisa escrever novamente h2, h3. ([alvaromontoro.com][1])

📌 Vantagens​

  • você pode selecionar vários níveis de uma vez;
  • pode usar expressões como even, odd, ou 2n+1 (quando suportado) para padrões;
  • torna o CSS mais limpo e expressivo. ([alvaromontoro.com][1])

🔹 Exemplo prático:

:heading(1, 4, 5) {
  font-weight: bold;
}

Isso seleciona h1, h4 e h5 por nível de heading.

⚠️ Limitações atuais (status experimental)​

💡 No momento em que o tutorial foi escrito (e ainda hoje em muitos navegadores), essa funcionalidade é experimental e pouco suportada, estando disponível apenas em versões de desenvolvimento de navegadores como o Firefox Nightly. ([alvaromontoro.com][1])

🧠 Diferença entre :heading() e outros seletores​

Você pode pensar: “mas não posso simplesmente usar :is(h1, h2) em vez de :heading(1, 2)?”

✔️ Sim, isso pode produzir resultados parecidos em muitos casos. ❌ Porém, :heading() funciona de forma semântica — ele seleciona com base no nível lógico do título, mesmo se houver mudanças como heading offsets ou heading reset (novos atributos que permitem alterar o nível sem mudar o tag). ([alvaromontoro.com][1])

🛠 Exemplo completo (simulado)​

HTML:

<h1>Título principal</h1>
<h2>Capítulo</h2>
<h3>Seção</h3>
<p>Parágrafo comum</p>

CSS:

:heading {
  color: red;
}

📌 Resultado: todos os headings (h1, h2, h3) ficam vermelhos. Essa sintaxe é mais elegante do que listar todos os elementos manualmente. ([alvaromontoro.com][1])

🧩 Conclusão​

✅ Pontos fortes​

  • Sintaxe limpa para selecionar todos os títulos.
  • Possibilidade de selecionar níveis específicos de forma semântica.
  • Torna o CSS mais legível e moderno.

⚠️ Pontos fracos​

  • Ainda é recurso experimental e não amplamente suportado.
  • Navegadores atuais podem não reconhecer o seletor sem flags ou versões de teste. ([alvaromontoro.com][1])

📚 Onde aprender mais​

  • MDN Web Docs sobre :heading e :heading() — documentação oficial. ([alvaromontoro.com][1])
  • Especificação “CSS Selectors Level 5” do W3C — padrões futuros. ([alvaromontoro.com][1])