How do i change the style of the first word of a string?

Question

For example:
<p id="string">hello world</p>
what should i do with the css code in order to change the style of the first word of the string "hello world"?

Answer 1

html
<p id="string"> <span id="yourID">hello </span>world </p>

css
span#yourID {
YOUR STYLE
}

Answer 2

What you are looking for is a pseudo-element that doesn't exist. There are :first-letter and :first-line, but no :first-word.

To style the first word of a paragraph, you can use some jquery code. Here’s how you can accomplish it:

$('p').each(function() {
var word = $(this).html();
var index = word.indexOf(' ');
if(index == -1) {
index = word.length;
}
$(this).html('<span class="first-word">' + word.substring(0, index) + '</span>' + word.substring(index, word.length));
});

And now you can simply use the .first-word class to style the first word of each paragraph:

.first-word {font-style:italic;}

Answer 3

The best thing for you is to go and learn css3 And HTML5 and all your answers will be answered

Answer 4

p::first-letter { 
    font-size: 200%;
    color: #8A2BE2;
}