Note from Tuesday, May 17^th, 2022

I made this selector from the information available from the WHATWG HTML Living Standard:

:where(
	a[href],
	audio[controls],
	button,
	details,
	embed,
	iframe,
	img[usemap],
	input:not([type="hidden"]),
	label,
	select,
	textarea,
	video[controls]
)

Of particular note, to me, at least, is the section on kinds of content, which lists out elements grouped by some solid types: metadata, flow, sectioning, heading, phrasing, embedded, and interactive. Worth looking through!

Here’s a little extra for people using SCSS that makes it a bit easier and less verbose to use these groups in your code:

// Define your collections:
:where(h1, h2, h3, h4, h5, h6, hgroup) {
	@extend %heading !optional;
}

// And use them:
%heading {
	font-family: var(--font-family-heading);
	font-variant-numeric: lining-nums;
}

creates…

:where(h1, h2, h3, h4, h5, h6, hgroup) {
	font-family: var(--font-family-heading);
	font-variant-numeric: lining-nums;
}

Thanks for reading!