How to select element by order ? - Css


Tags: html,css,css-selectors

Problem :

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?



Solution :

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>


    CSS Howto..

    How to make a basic event calendar with javascript, jquery, html and css?

    How to position an element at the TOP LEFT corner of a page using CSS?

    How to make drop down show 2 columns

    how to get this modal window to work correctly?

    How do I make text and other items look like chalk without a specialized font using only HTML and CSS? [closed]

    How to align lists and text side by side with div tags?

    CSS HTML How to make a larger image than div display in full in div

    How to specifiy the order of CSS classes?

    How to add multiple css files to CKEditor editorarea

    CSS- how to prevent the original title info to be displayed

    How to display mouseover effect in GridView rows using only CSS?

    How to rotate and translate using CSS in IE8?

    How to override html property created by script (mediaelement.js)

    Given an image button with borders how to stretch/repeat middle part in CSS for variable length content?

    How to interpret HTML multiple class names in the CSS renderization? What W3C says about it?

    How to maintain table row height in scrolling window - Firefox?

    How add symbol in CSS for element?

    How to link a main.css to all Django templates? [closed]

    How to make a
  • link visited with css
  • How to reference CSS children [duplicate]

    How to format an HTML table using CSS for printing?

    How to control number of items per row using media queries in Flexbox?

    How to Change background-color of .body when hover menu ( Jquery - Shopify )?

    jQuery: How to check if an element exists and change css property

    Linkedin Follow Button not showing properly in Firefox

    How to make a fixed menu/sidebar while using position:relative?

    How to reverse a CSS animation on unchecked state?

    How achieve rounded shadow behide a rounded element using css3

    How to apply gradient to element with correctly display in IE9?

    How to select children in CSS