The shortest selector for the root element
To target the html element, you either use "html{}" or ":root{}" but thanks to CSS nesting you can simply use "&{}"
When used alone, the nesting selector will match the root element!
A one-character selector 🤯
⚠️ It has a lower specificity than html and :root
& {
font-family: sans-serif;
background: #25fca4;
--variable: value;
/* and so on */
}
/* same as html {} and :root {}
with a lower specificity!
*/More CSS Tips
- Single-digit inputs with one element (OTP) Turn a simple input into an One Time Password field.
- A Sparkle shape with one gradient Create a fancy sparkle shape using only one gradient.
- Create CSS Shapes with a single element An online resource to grab the code of any CSS shape with one click.
- Write better CSS with modern CSS Optimize your code and reduce redundancy using modern CSS..