css bold first word

How can I bold the first word of sente开发者_JS百科nce using CSS selectors and is this a good/bad way to do this with respects to browser comparability?

code:

  <h2>this is a sentence</h2>

thx

There is no ::first-word pseudo-element in CSS; you'll have to wrap the first word in an extra element and then select that.

Use Span class

So creat a class called bold and wrap first word in the class.

.bold {
font-weight:bold;
}

Then

<h2><span class="bold">the</span> brown fox</h2>

I have put the word between <b>First</b>

just put the first word in a strong tag.

<h1><strong>This</strong> is how you do it simply.</h1>

Here is the JS Fiddle

The current CSS selectors do now allow this.

So I change my approach to bold the first line.

HTML

<h2>this<br> is a sentence</h2>

CSS

h2::first-line{
   font-weight: bold;
}

If PHP is an option:

$string = "I've got a wonderful feeling";
$arr = explode(' ',trim($string));
$first = $arr[0];
$all_but = str_replace ("$first ","",$string);

This will give you both the first word plus the balance of the string. Then you can style each separately. Undoubtedly there is a smoother option for the $all_but.