Forums

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!

Schmotty

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.

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.

chriscoyier

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

Schmotty

This will work.


$string = "The black horse jumped over the brown fence.";
$find ="the";
$replace = "<span>the</span>";
$changed = str_ireplace($find,$replace,$string,$cnt);

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.

treehouse : what would you like to learn today?

Forums

Targeting certain words dynamically with CSS?