Menu
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?
554
So the order is: position , float , display . Text is laid out in line boxes, then words, then glyphs. So properties for font-size and line-height come first, then text-* , then word-* .
From Generic to Specific error strong , sort by the first simple selector, then the next, &c. ❧ When sorting rules, use the first selector of each rule to determine the rule's location, both within a section and within the style sheet. Do this after all the rules' selectors have been sorted.
CSS Order MattersIn CSS, the order in which we specify our rules matters. If a rule from the same style sheet, with the same level of specificity exists, the rule that is declared last in the CSS document will be the one that is applied.
The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order.
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>Since the first image has property border. You can style by that.
.product img[border] {
border: 5px solid green;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
