There have been a lot of great additions of late to CSS’s already formidable selection powers. Things like :focus-visible, :where(), and :is() really up the ante for how easily we can apply styles exactly as we want. Plus, it looks like maybe a parent selector (:has) might be in the cards?
But I’m here to ask for just a little bit more from the CSS gods. Specifically, I think we should have a selector for picking out specific text strings from within an element. Maybe it could look something like this:
/*Not real code*/
p:string('a random word or two') {
color: deepskyblue;
}Okay, so it’s not the kind of thing that will revolutionize the way we design our sites, but I think there are plenty of use cases that would make it worthwhile. Maybe you want to always emphasize key words or obfuscate offensive words wherever they occur in your body copy. Or maybe you want to always use a fancy ampersand in your logotype. Or—and this is what got me thinking about this—maybe you want to style specific words whenever they occur within a heading, like so:
Sure, you can do that sort of thing by manually wrapping every preposition in a span, but that’s not scalable, especially if your content isn’t created by coders. And of course you could write some javascript to find the text in question and wrap it in a span automatically, but that’s another hoop for both the dev and the browser to have to jump through.
Why not allow us to do it with CSS? I have to assume that it can’t be that computationally expensive since we’ve been doing stuff like this the javascript way since back in the jQuery days. And I think we’d see some really cool typographic design emerge as soon as it was easier style single words or short phrases in a scalable way.
Just a bit of food for thought.