Targeting certain words dynamically with CSS?

[kdubya]

Hey there,

I have a thought, and was curious to know if this is possible using CSS…

I am putting together a ‘newspaper-ish’ WordPress site. I’ve designed an H1 in a way that any instance of the word ‘THE’ is smaller and skewed a bit to save some space and to add a little jazz to the text.

Is it possible to target every instance of a particular word and give it it’s own style attributes? It wouldn’t be across all tags, only a select h1 style.

I work with document composition software that handles this type of thing via GREP expressions/styles in a great way and was curious if this was possible using CSS – or perhaps a blend of CSS, JS, HTML. This functionality could be extremely useful in dynamically built sites.

Any feedback would be helpful – thanks!

[kdubya]

Thanks, Schmotty

I was looking into CSS attribute selectors as well, but it doesn’t quite hit the mark I’m looking for…at least I think at the moment.

Thanks for the input – I will certainly be looking into accomplishing this via PHP, but am still open to other suggestions/input.

[Johnnyb]

Hey kdubya,

Yeah CSS won’t be able to do this, but here’s an example for you using JS: http://johndoesdesign.com/blog/2012/jquery/targeting-a-specific-word-using-javascript-and-jquery/

[noahgelman]

Don’t use js, use php to wrap the text in a span with a class.

Don’t rely on js for layout related parts of your site.

[Chris Coyier]

I think it would be super nice if CSS could do this, but everyone is correct of course, you cannot. I think it would be most likely that the syntax would select the parent if the text was found in the element. Like:

h1:contains(“CSS”) { }

And possibly a pseudo selector as well, like:

h1:contains(“CSS”)::found-strings { background: yellow; }

That’s gross syntax that would never happen, but something along those lines would be sweet.

[kdubya]

Thanks for all the feedback fellas. I’m looking into both suggestions, and if anyone has any resources doing this in PHP it would be greatly appreciated.

@chriscoyier, yeah you’re definitely right on the bunk syntax. The expressions I use for doing this in VDP is pretty bad.

Thanks again everyone

[kdubya]

You tha man Schmotty – having a little trouble getting it to work within my H2 title tags, still a PHP novice. I’ll keep digging. Thanks

[rfair404]

Is using js to wrap each word in a span such as lettering.js an okay way to do this?

I imagine that if you we’re only trying to target a 1-off string / h1 somewhere there may be a filter in WordPress for it.

[Author]

Posts