CSS :heading and :heading() Pseudo-Classes - New Heading Selectors in Firefox
Kevin Powell via YouTube
Learn AI, Data Science & Business — Earn Certificates That Get You Hired
CISSP MasterClass with a true CAT exam simulator
Overview
Google, IBM & Meta Certificates – 40% Off
One Coursera Plus subscription covers most Professional Certificates 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