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 ?

Solution 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

Solution 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!

Comments

[Mr. Alien]

This won't work, I don't know how it is voted up and that too in mere 30 seconds

[Patrick]

hmm, yep, this isn't working, i've wrote the basic usage of nth-child selectors without testing it. My bad. This will works only if it was something like this: jsfiddle.net/D6C7e/4

[SmalliSax]

Thank you for your answer, it works just like it should.