CSS text styling

Question

Is there a way to style the first word in tag differently than the other words in that tag? For example, say I had this snippet of code:

<h4>Worpress Quick Tip Of The Week</h4>

Is there way I could style the word "Wordpress" differently than the other words using css? I know I could just put a span with a unique class around the word Wordpress, but is it possible without doing that?

Thanks

Answer 1

No you can't.

You would need to use another tag.

CSS uses selectors which target tags. However, as you will notice, text inside the tag is not anything that could be targetted by even any selector. You target the tag which contains the text.

If you can wrap anything around it then you could. For example, just add a span, and then you can:

p:first-child {font-size:2em}

Because the first child of the p will be the span.

Answer 2

Have a look at this please.

There is first-letter and first-line but not first-word, however you can achieve this with the help of javascript.

Demonstration.

Answer 3

You could use the :first-letter pseudo-tag if you wanted to style the first letter but I'm unaware of a first-word tag.

h4:first-letter {
  font-size: larger;
}

Answer 4

There is no :first-word selector unfortunately. You can take a look at this script though that implements it by adding the firstWord class to, well, the first word.

span.firstWord {
  font-weight:bold;
  text-decoration: underline;
}