What is the best way to change to color of the first word in a paragraph?

Question

I have a lot of paragraphs where I want the first word to keep the same font, size, type - but I want to change just the color of the lettering.

Answer 1

p:first-child em {} is overqualifying that selector, I think. First, you do not need the :first-child pseudo element to target that first paragraph, since you already have that <em> tag surrounding that word. What's the point of adding in useless specificity? Second, it overcomplicates and bloats the code.
I also feel <em> is the wrong tag to apply, depending on whether or not you would pronounce that word differently from the rest of the text. The use of em implies that. If it's merely used for styling, a <span> tag would fit better.
So I would go with mytax's code. Simple, and efficient.
Would be handy though if CSS had a :first-word pseudo element :-).
In the meantime while we wait for improvements, if you DO need complete typographic control, try lettering.js (jquery plugin):
http://letteringjs.com/
Like this:
<p class="word_split">Don't break my heart.</p>
<script>
$(document).ready(function() {
  $(".word_split").lettering('words');
</script>
And then:
.word1 {} in your css would target "Don't"
.word2 {} in your css would target "break"