Change background colour of first paragraph in first div

Question

How do I change the background colour of the first paragraph in first div?

Currently my code changes the first paragraph of ALL divs :(

div#newsPage:first-of-type p:first-of-type {
    background:red
}

<main id="content" role="main" class="scroll">

 <div>

 <div id="newsPage" class="container">

  <div class="row" id="newsRow">

   <section class="some-other-area persist-area">
    <div class="col-md-4 col-sm-6 margin-bottom">
     <div class="item">
         <h1 class="persist-header"><a href="http://localhost:8888/third-test">Third Test</a></h1>

      <p>This is a new entry </p><p>This is a new entry <br></p><p>This is a new entry <br></p><p>This is a new entry <br></p><p>This is a new entry <br></p><p>This is a new entry This is a new entry This is a new entry This is a new entry <br></p><p>This is a new entry <br></p>
   
     </div>
    </div>
   </section>

   <section class="some-other-area persist-area">
    <div class="col-md-4 col-sm-6 margin-bottom">
     <div class="item">
         <h1 class="persist-header"><a href="http://localhost:8888/second-test">Second Test</a></h1>

      <p>This is a new entry </p><p>This is a new entry <br></p><p>This is a new entry <br></p><p>This is a new entry <br></p><p>This is a new entry <br></p><p>This is a new entry This is a new entry This is a new entry This is a new entry <br></p><p>This is a new entry <br></p>
   
     </div>
    </div>
   </section>

   <section class="some-other-area persist-area">
    <div class="col-md-4 col-sm-6 margin-bottom">
     <div class="item">
         <h1 class="persist-header"><a href="http://localhost:8888/first-test">First Test</a></h1>

      <p>This is a new entry </p><p>This is a new entry <br></p><p>This is a new entry <br></p><p>This is a new entry <br></p><p>This is a new entry <br></p><p>This is a new entry This is a new entry This is a new entry This is a new entry <br></p><p>This is a new entry <br></p>
   
     </div>
    </div>
   </section>
                                 
  </div>

 </div>

 </div>

</main>

Demo: http://jsfiddle.net/rabr5mjm/

That's OK, because I think it's simply a mistake that you selected the wrong element, also there are many way to do it, i.e. `:first-child`, `:nth-child(1)`, `:nth-of-type(1)` etc. The ultimate goal is to understand all the differences, and I'm trying to find the related posts. Here are some good ones - [first child vs first-of-type](http://stackoverflow.com/questions/24657555/css-first-child-versus-first-of-type), [nth-of-type vs nth-child](http://stackoverflow.com/questions/9313769/nth-of-type-vs-nth-child) — Stickers, Jul 15 '15 at 13:46

Magicprog.fr · Accepted Answer · 2015-07-15T13:37:31.653

1

#newsPage will always be the first one, because it's the only one. You should search for the first one of the section with .some-other-area.persist-area class inside #newsPage:

#content #newsPage .some-other-area.persist-area:first-child p:first-of-type {
  background: red none repeat scroll 0 0;
}

JSFiddle: http://jsfiddle.net/ghorg12110/rabr5mjm/1/

edited Jul 15 '15 at 13:37

answered Jul 15 '15 at 13:35

Magicprog.fr

4,072
4
26
35

Hi Magicprog! Many thanks for this and the detailed explanation too :) – michaelmcgurk Jul 15 '15 at 13:37

score 0 · Answer 2 · answered Jul 15 '15 at 13:37

You are targeting the first #newspage, but since there's only one, it takes every first p that it meets in divs inside. What you want, is to target the first .some-other-area and in there the first p.

CSS

div#newsPage .some-other-area:first-child p:first-of-type {
    background:red
}

Fiddle

Change background colour of first paragraph in first div

2 Answers2