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 trialgyatmnucla
7,618 PointsNth 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
gyatmnucla
7,618 PointsHere 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
Courses Plus Student 19,663 PointsDo you also have the HTML please :)
gyatmnucla
7,618 PointsWell... 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
231,275 PointsThere 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
Courses Plus Student 19,663 PointsYou 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
Courses Plus Student 19,663 PointsSomething 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.
Adam Sackfield
Courses Plus Student 19,663 PointsAdam Sackfield
Courses Plus Student 19,663 PointsCould you copy the code your are using inside here please.