kevin-powell 9 months ago
web development #Web Development

Kevin Powell | Getting Started with CSS Nesting

Nesting has landed in native CSS, and with Firefox gaining support for it, it is now supported in all the major browsers!

So let’s take a look at what nesting is, some of the gotcha’s with it, a little bit of how it differs from Sass nesting, and more.


00:00 - Introduction

01:20 - What is Nesting?

01:50 - Descendant selectors and nesting multiple levels deep

03:53 - The ampersand / nesting selector

06:02 - When do we need to use &?

09:00 - What we can’t use & for

11:20 - Creating compound selectors

13:34 - using & for hover and focus

15:13 - using & with not

16:15 - Using the & after another selector

18:07 - Nested media queries

19:38 - Nesting can change the order of your declarations

21:20 - Specificity with nesting

23:00 - Readability and searchability of your code base

25:22 - Browser support

Kevin Powell
720K subscribers