Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by gyatmnucla
gyatmnucla
7,618 Points

Nth child and first child select all childs

Hello everyone, would you happen to know what could be causing this issue ? When i use nth-child(1) on the parent, it applies the styles to all child, when i use nth-child(2 or more it doesnt apply a thing. Also first-child applies to all children aswell

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Could you copy the code your are using inside here please.

gyatmnucla
gyatmnucla
7,618 Points

Here it is :)

.testimonial_slider .slides:first-child span::before {
  content: url('images/alex.png');
  position: absolute;
  top: 61%;
  left: 45%;
}


or 

.testimonial_slider .slides:nth-child(1) span::before {
  content: url('images/alex.png');
  position: absolute;
  top: 61%;
  left: 45%;
}
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Do you also have the HTML please :)

gyatmnucla
gyatmnucla
7,618 Points

Well... It's from a WordPress but can give you the inspect element

<div class="wpb_wrapper">
            <div class="col span_12 testimonial_slider " data-autorotate="" style="opacity: 1;"><div class="slides" style="height: 433px;"><blockquote style="opacity: 1; left: 0px; z-index: 20;"><p>"J'ai beaucoup aimé l'expérience des TPE, c'est une nouvelle façon de travailler interressante!"</p><span>− name</span></blockquote><blockquote style="opacity: 0; left: -25px; z-index: 1;"><p>"J'ai beaucoup aimé l'expérience des TPE, c'est une nouvelle façon de travailler viasclifiante!"</p><span>− Christos Tsogkas</span></blockquote><blockquote style="opacity: 0; left: -25px; z-index: 1;"><p>"J'ai beaucoup aimé l'expérience des TPE, c'est une nouvelle façon de travailler wackerante!"</p><span>− Alexandre Kalteziotis</span></blockquote></div><div class="controls"><ul><li><span class="pagination-switch active"></span></li><li><span class="pagination-switch"></span></li><li><span class="pagination-switch"></span></li></ul></div></div>
        </div>

2 Answers

Steven Parker
Steven Parker
230,274 Points
Steven Parker
Steven Parker
230,274 Points

There is only one div with slides class in this example. So it is the :first-child (also :nth-child(1)). So your CSS is targeting all the spans inside it.

Perhaps you meant to target only the span inside the first of the blockquotes? That would be:

.testimonial_slider .slides blockquote:first-child span::before
Adam Sackfield
PLUS
Adam Sackfield
Courses Plus Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

You have the selectors on the wrong elements. Have a look at this example, copy it to codepen to see it working.

<div class="example">
  <ul>
    <li class="slides">First Child</li>
    <li class="slides">Second Child</li>
    <li class="slides">Thrid Child</li>
  </ul>
</div>

.slides:first-child  {
  color: blue;
}

 .slides:nth-child(1)   {
  color: red;
}
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Something like this will work in your example.

.testimonial_slider .slides blockquote:first-child span {
  color: blue
}

.testimonial_slider .slides blockquote:nth-child(2) span {
  color: red;
}

Just add the ::before on to the ends.