CSS CSS Selectors Advanced Selectors :nth Pseudo-Class Challenge

Derek Miller
Derek Miller
6,466 Points

What am I doing wrong? Clear property that clears left float.

I'm supposed to add a clear property that clears the left float, but can't seem to solve it. Tried researching but couldn't find a solution. Thanks!

style.css
/* Write the CSS in the media query below */

@media (min-width: 607px) {
  img:nth-child(3n+4) {
  float: left;
  clear: left;
  }
}
index.html
<!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

I went into the challenge and solved it. simply what you need to do is put float left for all the images. Now on your pseudo-class that is when you need to clear both. float:left & clear:left need to be in two separate selectors.

Your code should look like this:

@media (min-width: 607px) {

  img {
    float: left;
  }
  img:nth-child(3n+4){
    clear:left;
}
Derek Miller
Derek Miller
6,466 Points

Oh geez, what a silly mistake. Thank you so much!!!!

Try putting clear:left in it's separate selector. I have seen a developer before put it in ::after

I didn't realize this was a challenge at first, sorry.