Link to home
Start Free TrialLog in
Avatar of Mark Branscum
Mark BranscumFlag for United States of America

asked on

I have 3 paragraphs HTML CSS ..... wanting to choose first paragraph to make it lighter color

Below html specifically the paragraphs .... im wanting to select the first paragraph using css ..... using first-child I think ... im not sure how to do it so I can make it a lighter color .... note with out adding a class or ID to the p tag

<div class="container">
      <div class="meIntro">
        <p>Nulla porttitor accumsan tincidunt. Nulla porttitor accumsan tincidunt. Vivamus suscipit tortor eget felis porttitor
          volutpat.</p>

        <p>Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Lorem
          ipsum dolor sit amet, consectetur adipiscing elit.</p>

        <p>Proin eget tortor risus. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit.</p>
      </div>

Open in new window



.container {
  max-width: 1200px;  
  margin: 0 auto;
  color: #ffffff;
  padding: 0 20px;
}

.container::after {
  content: "";
  display: block;
  clear: both;
}

.meIntro {
  padding-top: 10px;
  width: 300px;
  color: #0e1012;
  }

Open in new window

Avatar of Rob
Rob
Flag of Australia image

You're right on with the first-child.  See the syntax below

http://jsbin.com/nugedavacu/edit?html,css,output

this is "start at the div with class meIntro and get all the p elements but stop at the first"
div.meIntro p:first-child {
  color: #abc;
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Alicia St Rose
Alicia St Rose
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Mark Branscum

ASKER

Great answer .... clear, concise, complete..... I'll give it a go tomorrow.... can't wait .... first-of-type sounds like the way to go ..... as it is possible that I may wish to add to markup .
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Sorry! I've corrected my response!
I will correct later. Apparently I can't edit responses in the phone app. Yes, I did mean nth-of-type(2).
Hmm...
Looks like we can't edit our posts anymore. Really?

Oh, well hopefully, my corrections are noticed!
This was spot on .... not did it do what was expected the explanation was clear, concise, and complete ... couldn't ask for more