Cool modern CSS features

This page is a stream-of-consciousness dump of all sorts of cool CSS features I think more people should be aware of.

Nested selectors#

Hey, did you know vanilla CSS lets you do Sass-style nested selectors now? Now you do! :D 

For example, this:

.my-cool-box {
	display: flex;
	padding: 10px;
	
	a { color: red; }
	> span:first-child { color: blue; }
	
	/* & (nesting selector) is optional */
	& .cool-inner-box {
		background: green;
		em { font-size: 2em; }
	}
}

is equivalent to:

.my-cool-box {
	display: flex;
	padding: 10px;
}

.my-cool-box a { color: red; }
.my-cool-box > span:first-child { color: blue; }

.my-cool-box .cool-inner-box { background: green; }
.my-cool-box .cool-inner-box em { font-size: 2em; }

Way less selectors, and your styles are nice and organized.

See the relevant MDN article, “Using CSS nesting” for more fancy tips and tricks for using them!