Modern CSS: :has(), clamp() & Subgrid

The parent selector :has(), fluid typography clamp(), and CSS Subgrid

« CSS Transforms: 2D & 3D Manipulations« Previous CSS Architecture, Cascade Layers (@layer) & BEM »Next »

CSS has evolved rapidly. Modern superpowers include :has() (the long-awaited parent selector), clamp() for fluid math, and CSS Subgrid for nested grid alignments.

Cutting-Edge Modern Selectors & Functions

:has() (The Parent Selector): Selects parent elements conditionally based on their descendants (e.g. card:has(img) styles cards that contain images).

clamp(min, preferred, max): Sets fluid values that scale with viewport width while respecting strict minimum and maximum boundaries: font-size: clamp(1rem, 2.5vw, 2.5rem);.

CSS Subgrid: Allows child elements of a grid item to inherit and align to the parent grid's tracks (grid-template-rows: subgrid;).

Fluid Typography & The Parent Selector

Try It Yourself »

/* Fluid typography: scales smoothly between 18px and 36px */
h1 {
  font-size: clamp(1.125rem, 4vw, 2.25rem);
}

/* Style form labels when their input is invalid */
.form-field:has(input:invalid:focus) {
  border-color: #ef4444;
  background-color: #fef2f2;
}

/* Style articles that feature an image hero */
article:has(> img.hero) {
  grid-column: span 2;
}

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Which CSS selector allows styling a parent container based on whether it contains a specific child element or state?

« Previous: CSS Transforms: 2D & 3D Manipulations Next: CSS Architecture, Cascade Layers (@layer) & BEM »