Public
- Public
- Network
- Groups
- Featured
- Popular
- People

/* Non-replaced inline elements / a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, kbd, label, mark, output, samp, small, span, strong, sub, sup, time, tt, var { outline: 1px dashed hsl(220 10% 50% / 50%) !important; / Block & replaced elements */ :not(&) { outline: 1px dashed color-mix(in oklab, color(display-p3 1 0 0) 90%, canvastext) !important; } }

Download link

/* Non-replaced inline elements */ a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, kbd, label, mark, output, samp, small, span, strong, sub, sup, time, tt, var { outline: 1px dashed hsl(220 10% 50% / 50%) !important; /* Block & replaced elements */ :not(&) { outline: 1px dashed color-mix(in oklab, color(display-p3 1 0 0) 90%, canvastext) !important; } }
https://cdn.masto.host/frontendsocial/media_attachments/files/111/920/192/173/593/697/original/c4df6e0df7132180.png

Notices where this attachment appears

Embed this notice
Lea Verou (leaverou@front-end.social)'s status on Tuesday, 13-Feb-2024 12:29:47 JST Lea Verou

Realization: CSS Nesting also allows you to basically do "else" clauses in selectors.
complex-selector {
if-styles;
:not(&) {
else-styles
}
}
(if you’re wondering what this code is for, it’s for a bookmarklet to show element boxes for educational reasons)

In conversation about 9 months ago from front-end.social permalink