CSS CSS Selectors Advanced Selectors :nth Pseudo-Class Challenge

Gareth Partridge
Gareth Partridge
13,408 Points

Inside the media query, create a new rule that targets img elements. Then, float the images left.

I am not sure how to target img inside the media query, I have tried various ways.

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

.img-@media (min-width: 607px) {
  float: 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>

1 Answer

Steven Parker
Steven Parker
203,729 Points

You don't want to modify the media query itself, the new rule should go inside it. And to target something by tag name, use only the name (no symbols) as a selector:

@media (min-width: 607px) {  /* don't change this part */
  img {                      /* new rule goes INSIDE */
    float: left;
  }
}