How I do I replace an nth class with a pseudo class that only targets a specific type of child element?

Question

I looked at some previous worksheets, but I had no luck.

style.css

/* Write the CSS in the media query below */

@media (min-width: 607px) {
  img {
    float: left;
  }
  img:nth-last-of-type() {
   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>

Answer 1 · 2016-06-17T03:34:41Z

June 17, 2016 3:34am

Use something like this for the nthchild:

img:nth-of-type(3n+4) { clear: left; }

Answer 2 · 2016-06-17T04:44:44Z

June 17, 2016 4:44am

Hi, you can use :nth-of-type selector.

It works similarly as :nth-child selector, but more specific as it targets only the type of element we are specifying; even if there is any other type on the list of elements.

Hope this will help! Good luck!

Welcome to the Treehouse Community

Looking to learn something new?

Ayaz Sadiq

Ayaz Sadiq

How I do I replace an nth class with a pseudo class that only targets a specific type of child element?

2 Answers

Cindy Lea

Cindy Lea

Raymond Tran

Raymond Tran