CODEWITHSUNDEEP
htmlcsscss-selectors
TSR
TSR

Reputation: 20637

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?

Upvotes: 6

Views: 4366

Answers (5)

Johannes
Johannes

Reputation: 67799

Use this selector: 

.product > img:first-child, .product > a:first-child > img

It selects the first direct img childs of .product and all <img> tags inside the first direct a childs of .product:

img {
    border: solid 2px black;
     }
.product > img:first-child, .product > a:first-child > img {
  border: solid 2px red;
  }
      <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>

Upvotes: 1

w3debugger
w3debugger

Reputation: 2102

Following @poi, you can also add :not() to style rating image.

/* For Product Image */
.product img[border] {
  border: 5px solid green;
}

/* For Rating Image */
.product img:not([border]) {
  border: 5px solid red;
}
<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>

Upvotes: 1

Sankar
Sankar

Reputation: 7117

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>

Upvotes: 4

pol
pol

Reputation: 2701

Since the first image has property border. You can style by that.

.product img[border] {
  border: 5px solid green;
}

Upvotes: 3

Dekel
Dekel

Reputation: 62676

You can use both:

div.product > img:last-child {
    border-color: red;  
}
div.product > a:last-child img {
    border-color: red;  
}

The first will be applied to the the last-image only if it's a direct child of the div.product element.
The second will be applied to the image of the last anchor (also - if it's a direct child of the div.product element).

Here is a working example:

img {
  border: solid 2px black 
}
div.product > img:last-child {
  border-color: red;  
}
div.product > a:last-child img {
  border-color: red;  
}
<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"/>
</div>

Upvotes: 1

Related Questions