All geek questions in one place

How to choose an item on order? - css

There are several layered elements in a div with a product class. These include two images. The first image is the product thumbnail, and the second image is the product rating. They both have no class, and I cannot change the html code. Sometimes images are wrapped inside the <a></a> tag.

I need to select only image product . This is the first img that appears in 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 ignores children and children. Wrapped image is ignored. How can I do this without changing the html code ?

+5
source share
5 answers

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>
+3
source

Since the first image has a border property. You can create a style.

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

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 last image only if it is a direct descendant of the div.product element.
The second will be applied to the image of the last anchor (also if it is a direct child of div.product ).

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>
+1
source

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

 /* 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>
+1
source

Use this selector:

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

It selects the first direct children of img from .product and all the <img> tags inside the first direct a child elements 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>
+1
source

Source: https://habr.com/ru/post/1258663/

More articles:


All Articles