Explore the newly supported CSS nesting feature in this comprehensive 27-minute video tutorial. Learn about descendant selectors, the ampersand nesting selector, compound selectors, and nested media queries. Discover how to use nesting for hover and focus states, with the 'not' selector, and after other selectors. Understand the impact of nesting on declaration order, specificity, and code readability. Gain insights into browser support and potential gotchas when implementing CSS nesting in your projects.
Overview
Syllabus
- Introduction
- What is Nesting?
- Descendant selectors and nesting multiple levels deep
- The ampersand / nesting selector
- When do we need to use &?
- What we can’t use & for
- Creating compound selectors
- using & for hover and focus
- using & with not
- Using the & after another selector
- Nested media queries
- Nesting can change the order of your declarations
- Specificity with nesting
- Readability and searchability of your code base
- Browser support
Taught by
Kevin Powell
