Modern CSS

Nesting, :has(), container queries, aspect-ratio and clamp().

Video tutorialTrack course · freeCodeCamp

CSS Full Course — Zero to Hero

Speed

0.75x1x1.25x1.5x2x

Skip intro Next lesson

Watch 00:00 · 1 checkpoints Watch on YouTube More on this topic

Transcript & captions .txt

7/7

1. 00:00Modern CSS. Nesting, :has(), container queries, aspect-ratio and clamp().
2. 00:05:has() — style a parent based on its children, e.g. .card:has(img).
3. 00:10Native nesting — write child rules inside their parent block.
4. 00:15Container queries — @container respond to a component's own width.
5. 00:20aspect-ratio — keep media at a fixed shape without padding hacks.
6. 00:25clamp(min, ideal, max) — fluid sizing with guard rails.
7. 00:30Try it yourself — edit the sample and run it in the browser.

• :has() — style a parent based on its children, e.g. .card:has(img).
• Native nesting — write child rules inside their parent block.
• Container queries — @container respond to a component's own width.
• aspect-ratio — keep media at a fixed shape without padding hacks.
• clamp(min, ideal, max) — fluid sizing with guard rails.