How to color the first word using CSS

Question

How can I color the first word using CSS when I have div tag for the title?

 <div class="head-logo">  <? echo $siteName ?>  </div>

CSS

.head-logo{
     text-align:center;
     color:#000000; 
     font:normal 22px Tahoma;
     margin: 0px 10px 20px 60px;
}

Have you tried changing the value of the color from #000000 to something else? — DJ Burb, Dec 08 '14 at 21:23
I think you'll need some [additional HTML markup](http://stackoverflow.com/questions/7440572/css-bold-first-word) or [JavaScript](http://stackoverflow.com/questions/55612/css-to-increase-size-of-first-word) to do this correctly. — showdev, Dec 08 '14 at 21:24
I am afraid that is not possible with pure css. You could turn the first into a span tag using javascript and color that spans content. — arkascha, Dec 08 '14 at 21:25
You could always poke at the variable with php, and inject a span into it, with a "first-word" class or something — NoLifeKing, Dec 08 '14 at 21:25
You kind of have a [XY problem](http://meta.stackexchange.com/a/66378/171094) going on here. — Jeff B, Dec 08 '14 at 21:44

score 5 · Answer 1 · answered Dec 08 '14 at 21:28

You can do it this way:

<div class="head-logo">
    <?
    $title = explode(" ", "My title here");
    echo '<span class="firstWord">'.$title[0].'</span>'.substr(implode(" ", $title), strlen($title[0]));
    ?>
</div>

.head-logo{
    text-align:center;
    color:#000000; 
    font:normal 22px Tahoma;
    margin: 0px 10px 20px 60px;
}

.firstWord{color: red;}

Banzay · Accepted Answer · 2020-05-07T21:46:00.500

5

You can use php explode

<div class="head-logo">
    <?
        $title = explode(" ", $siteName, 2);
        echo '<span style="color: #FF0000">'.$title[0].'</span> '.$title[1]);
    ?>
</div>

edited May 07 '20 at 21:46

answered Dec 08 '14 at 21:35

Banzay

9,310
2
27
46

I'd rather like this answer than mine. I didn't know `explode` function accepted a third parameter to specify the number of fragmentations to perform! That's what I like of answering questions in this site. One helps other people, but one learns a lot too, reading other people's answers. Upvote! – Verhaeren Dec 08 '14 at 21:49

score 1 · Answer 3 · edited May 23 '17 at 12:01

Okay, so there are ways to do this with JS, and some tricky CSS workarounds.

Here's why it doesn't work: There is no "::first-word" pseudo class, since in a code language, one 'word' is a pretty half-baked definition. So the way I have always done this is with <span>...</span> tags, but I see you are using PHP to echo your website name, so you may be able to do something along the lines of this using the ::first-line pseudo element, then making the pseudo a block and picking it's length that way:

CSS:

display:block;
Width:40-100px; /* just enough for one word, depends on font size */
Overflow:visible; /* so longer words don't get clipped.*/
float:left; /* so it will flow with the paragraph. */
position:relative; /* for typeset adjustments. */

CSS to increase size of first word

This is a JS solution, that essentially replaces adds a span class in your tag and lets you change how many letters are there.

JS:

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

Style half of a word, sentence, etc

fiddle: http://jsfiddle.net/3gMK3/

The fiddle, CSS, and JS is not mine, just something I found while researching

How to color the first word using CSS

3 Answers3