CSS :heading and :heading() Pseudo-Classes - New Heading Selectors in Firefox
Kevin Powell via YouTube
PowerBI Data Analyst - Create visualizations and dashboards from scratch
Master Agentic AI, GANs, Fine-Tuning & LLM Apps
Overview
Google, IBM & Meta Certificates – 40% Off
One plan covers every Professional Certificate on Coursera.
Unlock All Certificates
Explore the newly introduced :heading and :heading() pseudo-classes in this 12-minute CSS tutorial that demonstrates these long-awaited selectors now available in Firefox Nightly. Learn how the :heading pseudo-class allows you to target all heading elements (h1-h6) with a single selector, eliminating the need to write lengthy comma-separated lists. Discover the more specific :heading() pseudo-class that enables targeting of particular heading levels or ranges, providing greater flexibility in your CSS styling. Understand the practical applications of these selectors for creating more efficient and maintainable stylesheets, while examining their current browser support status and implementation details. The tutorial includes live demonstrations of both pseudo-classes in action, showing how they can streamline your CSS code when styling heading elements across different levels of your document hierarchy.
Syllabus
00:00 - Introduction
01:11 - the :heading pseudo-class
07:00 - Free Grid workshop
08:50 the :heading pseudo-class
Taught by
Kevin Powell