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!
2023-07-19 07:00:00 - Kevin Powell
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