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
Prudence Chinhenga
4,980 Pointsnth psuedo-class
how do i code
/* Write the CSS in the media query below */
@media (min-width: 607px) {
img {
float: left;
}
img:nth-child (4th ),
img:nth-child (3rd ){
float:clear;
}
}
<!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>
<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>
2 Answers
Prudence Chinhenga
4,980 Pointsimg:nth-child (4th ), img:nth-child (3rd ){ float:clear; } }
Niclas Valentiner
8,947 PointsI'm not entirely sure what you're trying to clear but:
//Your code
img:nth-child (4th ),
img:nth-child (3rd ){
float:clear;
}
//Assuming you want to clear both the left and right sides of every 3rd and 4th element
img:nth-child (3n ),
img:nth-child (4n ){
clear: both;
}
A couple of links for further reading on nth-child and the clear property: