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
mo ode
4,352 PointsIt looks like an <h1> made its way inside the parent body. Now our :nth-child selector no longer targets the desired com
It looks like an <h1> made its way inside the parent body. Now our :nth-child selector no longer targets the desired com What is the correct code to write down? I'm confused. Can anyone give me the codes please?
@media (min-width: 607px) { img { float: left; } :nth-of-type(-n+3) { clear: left; } }
/* Write the CSS in the media query below */
@media (min-width: 607px) {
img {
float: left;
}
img:nth-child(3n+4) {
clear: left;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Selectors</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Gallery</h1>
<img src="thumb-forest.jpg" alt="">
<img src="thumb-resort.jpg" alt="">
<img src="thumb-trees.jpg" alt="">
<img src="thumb-falls.jpg" alt="">
<img src="thumb-view.jpg" alt="">
<img src="thumb-sunset.jpg" alt="">
<img src="thumb-lake.jpg" alt="">
<img src="thumb-beach.jpg" alt="">
<img src="thumb-bay.jpg" alt="">
<img src="thumb-peaks.jpg" alt="">
<img src="thumb-falls.jpg" alt="">
<img src="thumb-resort.jpg" alt="">
</body>
</html>
4 Answers
Steven Parker
230,324 PointsHere's a hint: the pseudo-class you need here is one that only considers elements of the same type.
But if you really want a spoiler...
"the pseudo-class that only targets a specific type of child element" is named: nth-of-type.
mo ode
4,352 PointsI type nth-of-type and it did not work #HELP!
mo ode
4,352 PointsIt works now Mr Parker. Thanks.
Steven Parker
230,324 Pointsmo ode — Good deal. You can mark a question solved by choosing a "best answer".
And happy learning!
mo ode
4,352 PointsCan you please give me the codes not the hints. When I see the codes then I will understand. Thanks.
Steven Parker
230,324 PointsLearning how to use references to find info you need is an important skill that you will use frequently as a developer. But if you're not ready to work on that just yet, I've added a spoiler to my answer.