CSS Native Nesting

Write cleaner CSS with native nesting 🧼

Before, you'd repeat the same selector again and again:

button { ... }
button:hover { ... }

Now, with native CSS nesting, you can group related styles inside the parent block.

Here’s the key syntax:

selector {
/* base styles */

:hover {
/* hover styles */
}
}

🧠 How it works:

The & means “this same selector” — it's a placeholder for the parent.

You can use it for pseudo-classes (:hover, :focus), child elements (& span), or even media queries.

Example in words:

Instead of writing button:hover, you write :hover inside the button block.

✅ Why it’s awesome:

Less repetition

Component-like structure

Better readability

🌐 And if you eagerly want to say: But Utsav, it must not be supported by any browsers!

Well, it's supported 91.36% globally and is growing fast.

Supported in most modern Chrome, Safari, Firefox, and Edge.

Use it now to simplify your styles — your future self will thank you 😎