Modern CSS

What you'll learn

• How :is, :where, and :not group selectors and where the specificity gotcha hides
• What :has unlocks for parent-aware styling and why to use it sparingly
• Native CSS nesting and the differences from Sass that bite
• Cascade layers as a calm replacement for !important
• Logical properties for layouts that adapt to writing direction
• oklch, color-mix, and accent-color — modern colour in plain English
• @scope as a built-in alternative to BEM and methodology
• Anchor positioning for tooltips and popovers without a single line of JavaScript

1. 01
   :is, :where, and :not

   Group selectors without writing them five times. The specificity surprise hiding in :where.
   13 min
2. 02
   :has — the parent selector

   Style a parent based on what is inside it. The feature CSS waited fifteen years for.
   15 min
3. 03
   Native nesting

   Nest rules without Sass. The two ways it differs from preprocessor nesting.
   14 min
4. 04
   Cascade layers

   @layer puts you back in control of which rules win. The end of the !important arms race.
   16 min
5. 05
   Logical properties

   margin-block, padding-inline — sizing that adapts when text flows top-to-bottom or right-to-left.
   14 min
6. 06
   Modern colour

   oklch, color-mix, accent-color — colour spaces in plain English and the practical wins.
   16 min
7. 07
   @scope and scoped styles

   Limit a rule's reach without inventing a class methodology. BEM, but built in.
   15 min
8. 08
   Anchor positioning

   Pin a tooltip to a button, a popover to a menu — no JavaScript, no library.
   17 min