From the course: CSS for Developers

Unlock this course with a free trial

Join today to access over 24,400 courses taught by industry experts.

Native CSS nesting

Native CSS nesting - CSS Tutorial

From the course: CSS for Developers

Start my 1-month free trial Buy for my team

Native CSS nesting

“

- [Instructor] CSS pre-processor like Sass or Less gave us the ability many years ago to nest selectors and then have them compiled into plain CSS. Nesting selectors is great because it accomplishes things like making our CSS easier to read, making it more modular by grouping related styles, it's easier to maintain, and you can get the same result with fewer lines of code, making for smaller CSS files. As of 2023, the CSS specification officially includes CSS nesting, and even better, all major browsers offer support. As the name implies, this feature lets you nest CSS selectors, which makes it possible to group related styles. So in this example, let's say we want to style an element with the class example. We want to style any links contained within it, and then we also want to style those hover and focus states. Previously, we had to write CSS rules as separately scope definitions based on a selector or a combination of selectors. So in this case, we've got the already styled…

Contents