-2

I want to change a specific word's css through out the site.I can't add any html element around that word (like span,div) because that word is using several times and many places on site.

Is it possible to change this by css?

Albzi
  • 15,431
  • 6
  • 46
  • 63
Ankit Agrawal
  • 6,034
  • 6
  • 25
  • 49
  • 1
    Take a look at this http://codepen.io/FWeinb/pen/djuIx – Jan.J May 12 '14 at 13:53
  • 1
    Yes, and there are some duplicates of this question already, I'm sure. EDIT - if you only want CSS, though, why use the JS tag? – TylerH May 12 '14 at 13:54
  • i didn't find any question – Ankit Agrawal May 12 '14 at 13:55
  • *"I can't add any html element around that word (like span,div) because that word is using several times and many places on site."* And? This is where global search-and-replace comes in handy, whether in an IDE, using `sed`, etc. – T.J. Crowder May 12 '14 at 13:57
  • @Jan.J i'm really interested to find out how that pen can solve the problem at hand. It uses selectors like `nth-letter`, in a website how do could you find out the position a particular word using those..?? – T J May 12 '14 at 13:58
  • It is only possible with JS help http://codepen.io/anon/pen/bHAGs – Jan.J May 12 '14 at 13:58
  • do you have it inside any particular container? – mohamedrias May 12 '14 at 14:00
  • That script wraps all words/letters etc. with special spans, and adds specific css styles to site. – Jan.J May 12 '14 at 14:00

2 Answers2

3

You can't do this purely with CSS. So your options are:

  1. What you said you "couldn't" do — edit the source files, e.g., global search and replace. Put a span with a relevant class around the word and style that class.

  2. Use JavaScript to retroactively wrap the word in an element (a span would probably be best), again use a class on it and style that class.

If you use jQuery, this answer helps you easily wrap specific words with a span. If you don't, this other answer shows how to do it.

Community
  • 1
  • 1
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • i can't edit source file because i really don't know how many times that word appearing – Ankit Agrawal May 12 '14 at 14:05
  • 1
    @AnkitAgrawal: That doesn't make any sense. You *find out* how many times, using (again) a global search and replace. Global search (and the variant, global search and replace) is an absolutely *fundamental* tool of programming. – T.J. Crowder May 12 '14 at 14:06
0

I'm a fraid a pure CSS solution will not work for you. I can only offer a JavaScript solution that will wrap the target words in a tag for you.

Demo on jsfiddle

var styleWord = function(target, word)
{
    var html = target.innerHTML;
    html = html.replace(new RegExp(word, "g"), '<span class="styled">'+word+'</span>');
    target.innerHTML = html;
};

The function I wrote takes in two params: the target element wherein you want the words changed (it won't leave HTML tags and attributes alone, so you might want to refine it) and the word you're looking for. It will wrap the word in a span so you can style it any way you wish.

mingos
  • 23,778
  • 12
  • 70
  • 107
  • Beware that this will completely wipe out event handlers on descendant elements if they're hooked up prior to your doing the replacement. – T.J. Crowder May 12 '14 at 14:08
  • @T.J.Crowder Yes, it will. This is a dumb one-liner that's meant to be written in a more fool-proof way. I'm not up to writing a complete JS plugin at the moment, I'm afraid :). And thanks for the sencond comment; indeed, I accidentally removed the var declaration. – mingos May 12 '14 at 14:11