Style half of a word, sentence, etc

Question

I'd like to show a title with the first three characters in different color.

I know this can be done with <h2><span>The</span> awsome title</h2> but I was wondering if there is some kind of "nth-child" property that can be applied to characters inside an element.

I'd like to avoid breaking the text by inserting other elements ( etc.)

A (relatively) crossbrowser solution would be welcome.

it does seem odd that CSS implemented `first-line` and `first-character` but not `first-word`. I can't quite see the logic in that decision. — Spudley, Mar 04 '11 at 15:42

score 6 · Answer 1 · answered Mar 04 '11 at 15:31

6

There is no cleaner way than what you already have.

<h2><span>The</span> awesome title</h2>

With CSS:

h2 {
    color: red
}
h2 span {
    color: blue
}

There's :first-letter and :first-line, but no :first-word.

I imagine the reason for this is that it's hard to define exactly what a "word" should be.

The only way to do it without changing your markup is to use JavaScript to enclose the first word with a <span> (and style it the same way), but I would only recommend that if the rest of your site already heavily relies on JavaScript to function.

answered Mar 04 '11 at 15:31

thirtydot

224,678
48
389
349

Thanks, well seems js is the only viable option then. – mike23 Mar 04 '11 at 16:03
@mike23: The demo posted by @Šime Vidas in the comment to your question is a very slick way to do it if you're using jQuery. – thirtydot Mar 04 '11 at 16:05

score 4 · Accepted Answer · edited Jan 27 '16 at 11:55

4

Yep, JavaScript is the only way I can think of (as everyone else has already said!). Demo here.

$(function() {
    $('h2').each(function(){
        $(this).html( $(this).text().replace(/(^\w{3})/,'<span>$1</span>'));
    });
});

edited Jan 27 '16 at 11:55

Kyle

65,599
28
144
152

answered Mar 04 '11 at 15:36

andyb

43,435
12
121
150

4

Better demo: http://jsfiddle.net/simevidas/3gMK3/1/ Btw, you don't need to wrap your jQuery code inside a ready handler if you select onLoad or onDomReady on the left. – Šime Vidas Mar 04 '11 at 15:39
Agreed, a much better demo. Thanks for the tip as well :) – andyb Mar 04 '11 at 15:44
@Šime Vidas, I'm having trouble with special characters, for examples the code doesn't work on `
North & South
` because of the ampersand. Is there any way to make the regexp handle any character ? – mike23 Mar 08 '11 at 13:31
@mike You want to wrap the word "North" in a SPAN? – Šime Vidas Mar 08 '11 at 13:43
@Šime Vidas, no for example "North &" (or any longer sentence containing "&"). See [demo](http://jsfiddle.net/8Cays/) – mike23 Mar 08 '11 at 13:52
1

@mike Your demo does not work because `\w` matches letters and digits but not spaces. `\w{7}` would require a word that is at least 7 letters long. You can use a dot to match any character. [See here](http://jsfiddle.net/simevidas/8Cays/1/) – Šime Vidas Mar 08 '11 at 14:01
@Šime Vidas, thanks ! Unfortunately it [doesn't work in jQuery 1.4.2](http://jsfiddle.net/L4TCm/), Seems like I'll have to upgrade. – mike23 Mar 08 '11 at 14:21
1

@mike It works in 1.4.4. If you cannot upgrade to that version, then you can use `each` to make it work: http://jsfiddle.net/simevidas/L4TCm/2/ – Šime Vidas Mar 08 '11 at 14:46

score 2 · Answer 3 · answered Mar 04 '11 at 15:32

This isn't possible with the current CSS operators you are talking about nth-whatever,

This could however be done with JavaScript... if of course you want to go down that route, the best way to do it would be with <span> tags as then you will have no problems with people who have disabled JS.

It is entirely up to you, but if I were in your position I would just man up and use JS, it is called progressive enhancement and unobtrusive JS, as long as the content is not wrecked if the user disables JS it is acceptable, see here:

http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/

score 2 · Answer 4 · edited May 23 '17 at 12:32

2

Sadly, there isn't a way to do this with stylesheets. CSS3 provides us with first-letter and first-line, but not first-word, and certainly not first-n-letters.

See also the answers to this question for more: CSS to increase size of first word

~~JQuery does implement a first-word selector, so if you're prepared to go with the Javascript option, you may be able to do it.~~

Heh. It seems that JQuery doesn't actually implement it after all. I must have been using a plugin when I saw it.

But here's a link to a Javascript solution that might help: http://www.dynamicsitesolutions.com/javascript/first-word-selector/

edited May 23 '17 at 12:32

Community

1
1

answered Mar 04 '11 at 15:34

Spudley

166,037
39
233
307

1

jQuery implements a first-word selector? Source please. – Šime Vidas Mar 04 '11 at 15:35
@Šime Vidas - eh... I could have sworn it did.... but can't see it in the manual now that I look. Maybe I was using a third-party plug-in or something. In any case, a Javascript or JQuery solution wouldn't be hard to implement. – Spudley Mar 04 '11 at 15:40

Style half of a word, sentence, etc

4 Answers4

North & South

Linked