%% generate tags start %%
#software-engineering
%% generate tags end %%
#software-engineering/css
Before
```css
.nesting {
color: hotpink;
}
.nesting > .is {
color: rebeccapurple;
}
.nesting > .is > .awesome {
color: deeppink;
}
```
After
```css
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
```
Nesting helps developers by reducing the need to repeat selectors while also co-locating style rules for related elements. It can also help styles match the HTML they target. If the `.nesting` component in the previous example was removed from the project, you could delete the entire group instead of searching files for related selector instances.
**Nesting can help with:**
- Organization
- Reducing file size
- Refactoring
Nesting is available from Chrome 112 and also available to [try in Safari Technical Preview 162](https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/).
you can check whether it is supported here:
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://caniuse.com/?search=css%20nesting")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://caniuse.com/?search=css%20nesting" target="_blank">
<div class="nifty-link-card-text" style="width: 100%;">
<div class="nifty-link-card-title line-clamp-2">"css nesting" | Can I use... Support tables for HTML5, CSS3, etc</div>
<div class="nifty-link-card-description">"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://caniuse.com/img/favicon-128.png">
https://caniuse.com/?search=css%20nesting
</div>
</div>
</a>
</div>
%% run end %%
> [!info] read more
> [Using CSS nesting - CSS: Cascading Style Sheets | MDN (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting#invalid_nested_style_rules)