The :heading pseudo-class selector is now available in Safari Tech. Preview (as well as Firefox Nightly (behind a flag)).

:heading(1, 3) {
color: #bada55;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:heading_function

https://github.com/WebKit/WebKit/commit/a318b9ffedeaf33a639f45724b6ef63bda68e90f

:heading() - CSS | MDN

The :heading() CSS pseudo-class function represents all heading elements whose levels match a comma-separated list of integers. This allows you to style elements at specific heading levels at once, rather than matching and styling them individually.

MDN Web Docs
Brook (Leafcutter John Remix), by Liz Hanks - Remixed by Haiku Salut, Jason Singh, Richard Norris & Leafcutter John

from the album Land - Remixed

Liz Hanks
@lizardbill I thought “chucknorris” would convert to “#BADA55” (which is the code I use when debugging CSS) 🤪
@boutell I’m usually a #bada55 or #123 man myself but #def is so much better! 😍

Today I learned that #bada55 is a color 😆

#til #tipoftheday

@NanoRaptor

I was creating a swatch of #BADA55 (#KerbalSpaceProgram reference) when GIMP froze hard and I had to force shutdown my entire system. Then I knew it was time to call it a day. Yeesh.

Freaking 12th Gen Intel. So unstable.

I was always a fan of #BADA55 when I needed a placeholder color. Not only is it badass, it’s a nice mellow green.

I'm in a Sass project that uses stuff we used to do all the time and it worked just fine:

$color: #bada55;
$other-color: rgba($color, .75);

But rgba() is legacy syntax. Turns out, there is now truly acceptable way forward in sass. You can't rgb($color / .75), sass complains that color channels are missing. You can't rgb(#{$color} / .75), sass interprets this as a mathematical operation. list.slash() also doesn't help in this instance.

I would love to know how one would go about it

#css #sass

@GalmeshRosewood #bada55 is a nice calm lime I use a lot