Grow your CSS skills. Land your dream job.

Targeting certain words dynamically with CSS?

  • # May 10, 2012 at 9:57 am

    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!

    # May 10, 2012 at 10:28 am

    I dont think CSS can do it, but js or php could wrap each instance in a span tag. I think php would be faster and more reliable cross browser.

    # May 10, 2012 at 10:45 am

    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.

    # May 10, 2012 at 2:29 pm

    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/

    # May 10, 2012 at 5:46 pm

    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.

    # May 10, 2012 at 8:03 pm

    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.

    # May 10, 2012 at 9:51 pm

    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

    # May 11, 2012 at 12:59 pm

    This will work.


    $string = "The black horse jumped over the brown fence.";
    $find ="the";
    $replace = "the";
    $changed = str_ireplace($find,$replace,$string,$cnt);
    # May 11, 2012 at 3:45 pm

    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

    # February 25, 2013 at 3:20 pm

    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.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".