Targeting paragraph inside a div

Question

I have this line of HTML code:

<div id="slideshow2">
  <div class="active2">
    <img src="noangel.png" alt="Slideshow Image 1" />
    <p class="imgDescription2">NoAngel</p>
  </div>
  <div>
    <img src="anders.png" alt="Slideshow Image 2" />
    <p class="imgDescription2">This is Anders</p>
  </div>
  <div>
    <img src="fayeblais.png" alt="Slideshow Image 3" />
    <p class="imgDescription2">Something about FayeBlais</p>
  </div>
  <div>
    <img src="ronny.png" alt="Slideshow Image 4" />
    <p class="imgDescription2">Ronny Information</p>
  </div>
</div>

How would I target the first paragraph only or the 3rd one only to change the color, font type etc ?

Answer 1

To select only the first paragraph in the third <div>:

#slideshow2 > div:nth-of-type(3) > p {
   /* Styles */
}

That selector selects an element that has the ID of slideshow2, then the third <div> that is a direct child, and finally the <p> element which is a direct child of that <div>.

Here's a demonstration:

#slideshow2 > div:nth-of-type(3) > p {
  color: red;
}

<div id="slideshow2">
  <div class="active2">
    <img src="noangel.png" alt="Slideshow Image 1" />
    <p class="imgDescription2">NoAngel</p>
  </div>
  <div>
    <img src="anders.png" alt="Slideshow Image 2" />
    <p class="imgDescription2">This is Anders</p>
  </div>
  <div>
    <img src="fayeblais.png" alt="Slideshow Image 3" />
    <p class="imgDescription2">Something about FayeBlais</p>
  </div>
  <div>
    <img src="ronny.png" alt="Slideshow Image 4" />
    <p class="imgDescription2">Ronny Information</p>
  </div>
</div>

View on JSFiddle

Answer 2

Try using nth-child css selector.

for your case, try this to target 3rd paragraph inside slideshow2 div.

#slideshow2 p:nth-child(3) {color:blue; font-size:20px;}

You can find more tricks to target elements of your choice or nth childs here: http://nthmaster.com/

hope this helps!