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!

Answer 3

for the first p only

p:nth-child(1) { }

3rd

p:nth-child(3) { }

... get it?

Answer 4

first, select 3rd div with syntax like: div:nth-of-type(3){ } /* and this means you are selecting everything inside 3rd div. */

how ever, if you wish to select 2rd p of 3rd div even you don't have 2rd p in your question. you will do syntax like this :

div:nth-of-type(3)>p:nth-of-type(2) { }

get it?