CSS Nesting in 5 minutes

Nesting is coming to native CSS! As of August 29th, with Firefox shipping v117, all modern browsers will have support for CSS Nesting. Let's learn CSS Nesting in 5 minutes!

Prefer an article? Read it here: creatures.sh/blog/getting-started-with-css-nesting…

🔗 Links:
👉 CodePen Example: codepen.io/nikolovlazar/pen/poQYdOG
👉 Browser support: caniuse.com/css-nesting
👉 Learn more: developer.chrome.com/articles/css-nesting/

--

🤝 Become a friend of the channel! Start your membership today and get extra benefits: youtube.com/channel/UCTexaJMnN_Pv6TVueQ61-oQ/join
💬 A bunch of us are hanging out at discord.creatures.sh/. Join us!
🐦 Find me on the bird app: twitter.com/NikolovLazar
🎥 What I use for coding and making videos: nikolovlazar.com/uses

--

00:00 Intro
00:57 Styling the card, header, and h2 with nested selectors
01:37 Styling the content without using the & sign
02:30 Styling the footer and anchor tag with the & sign
03:05 Using the :is selector to target specific child elements
03:36 Using the :not selector and understanding the & symbol
04:23