CSS CSS Selectors Advanced Selectors :nth Pseudo-Class Challenge - Pt. 2

It 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; } }

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

@media (min-width: 607px) {
  img {
    float: left;
  }
  img:nth-child(3n+4) {
   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>
   <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
Steven Parker
203,731 Points

Here'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.

I type nth-of-type and it did not work #HELP!

It works now Mr Parker. Thanks.

Steven Parker
Steven Parker
203,731 Points

mo ode — Good deal. You can mark a question solved by choosing a "best answer".
And happy learning!

Can you please give me the codes not the hints. When I see the codes then I will understand. Thanks.

Steven Parker
Steven Parker
203,731 Points

Learning 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.