TSR TSR - 1 month ago 7
CSS Question

How to select element by order ? - Css

In a

div
with class
product
, there are some multi-level elements. These include two images. The first image is the product thumbnail and the second image is the product rating. They both don't have class and I can't change the html code. Sometimes, the images is wrapped inside a
<a></a>
tag.

I have to select the
image product
only. It's the first
img
that appears by order inside each
div.product
.



<html>
<style>
img {
border: solid 2px black
}
</style>
</head>
<body>
<div class="product">
<a href="#"><img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"></a><br>
<img src ="http://www.vistaview360.com/menuimages/stars-5.jpg"/>
</div>
<div class="product">
<a href="#"><img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"></a><br>
<a href="#"><img src ="http://www.vistaview360.com/menuimages/stars-5.jpg"/></a>
</div>
<div class="product">
<img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"><br>
<a hre="#"><img src ="http://www.vistaview360.com/menuimages/stars-5.jpg"/></a>
</div>
<div class="product">
<img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"><br>
<img src ="http://www.vistaview360.com/menuimages/stars-5.jpg"></img>
</div>
</body>
</html>





I tried with
first-of-type
and
first-child
but this method ignore children and sub-children. The wrapped image gets ignored.
How can I do that without changing the html code?

Answer

How about this...

div.product img[data-pin-nopin="true"]:nth-child(1){
    border-color:red;
  }
<html>
  <head>
<style>
  img {
    border: solid 2px black
  }
</style>
</head>

<body>
  <div class="product">
    <a href="#">
      <img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true">
    </a>
    <br>
    <img src="http://www.vistaview360.com/menuimages/stars-5.jpg" />
  </div>
  <div class="product">
    <a href="#">
      <img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true">
    </a>
    <br>
    <a href="#">
      <img src="http://www.vistaview360.com/menuimages/stars-5.jpg" />
    </a>
  </div>
  <div class="product">
    <img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true">
    <br>
    <a href="#">
      <img src="http://www.vistaview360.com/menuimages/stars-5.jpg" />
    </a>
  </div>
  <div class="product">
    <img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true" />
    <br>
    <img src="http://www.vistaview360.com/menuimages/stars-5.jpg" />
  </div>
</body>

</html>