Note from Tuesday, May 17th, 2022

This note was published on .

I’ve got a quick little nugget of CSS to share today, a selector containing all interactive content.

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!