Skip navigation
Currently Being Moderated

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

Jul 5, 2013 9:43 AM

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.

  • Currently Being Moderated
    Jul 5, 2013 9:52 AM   in reply to rgrstvr

    Using a span and setting it a class to make your changes.  For example your HTML might be like this:



    <p><span class="first-word">This</span> is paragraph number one</p>


    Then you create a style like this:



    .first-word {

        color: red;


    NOTICE that there is a period before first-word in the style definition.


    Hope this gives you a start.

    Mark as:
  • Currently Being Moderated
    Jul 5, 2013 11:11 AM   in reply to rgrstvr

    With HTML and CSS there are usually many ways to achieve what you want.


    I might approach it like this:



         p:first-child em {color:red}




         <p><em>First</em> word is emphasized in red.</p>



    Nancy O.

    Mark as:
  • Currently Being Moderated
    Jul 5, 2013 1:54 PM   in reply to Nancy O.

    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):


    Like this:

    <p class="word_split">Don't break my heart.</p>

    $(document).ready(function() {


    And then:

    .word1 {} in your css would target "Don't"

    .word2 {} in your css would target "break"

    Mark as:
  • Currently Being Moderated
    Jul 5, 2013 6:03 PM   in reply to rgrstvr

    I suggest do this:


    1) Change your 4567000000 BC line to this one:


    <p><span class="first-word">4,567,000,000 BC</span> - Name derived from Hades.</p>


    2) Add the following line after p at the top of the page:



    .first-word {color: red;}

    Notice the period in the above code.


    The top of line will now look like this:



    h1 {font-size:200%; font-family: "Comic Sans MS"; color: #66FFFF; text-align:center;}

    h2 {font-size:100%; font-family: "Comic Sans MS"; color: red;}                     

    p {font-size:100%; font-family: "Comic Sans MS"; color: #EEEEEE;}

    .first-word {color: red;}



    The other solutions are almost similar to this one but try this one and then come back and ask how to implement other solutions.

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points