CSS :heading and :heading() Pseudo-Classes - New Heading Selectors in Firefox
Kevin Powell via YouTube
Our career paths help you become job ready faster
AI Adoption - Drive Business Value and Organizational Impact
Overview
Coursera Spring Sale
40% Off Coursera Plus Annual!
Grab it
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