'Select Second Image Not In <noscript> Tag

Wordpress is returning the followed by a tag and the same inside. In my case, I have two images and I need to select the second and ignore the ones.

Here is a simple example of the HTML:

<div>
 <img>
 <noscript>
  <img>
 </noscript>
 <img> <!-- Select this <img> -->
  <noscript>
   <img>
  </noscript>
 </div>

Here is the CSS I have at the moment.

div img:nth-child(2){
 // style goes here
}
htmlcssselector


Solution 1:[1]

:nth-child() selects elements that are the nth children of their own parents. However, the second child of that <div> is the <noscript> element, so it won't select the <img>.

To select the <img>s that are the second <img> of their parent, you can use :nth-of-type() instead:

div img:nth-of-type(2){ ... }

Note that it will also select the second images inside the <noscript>s if they contain more than one <img>.

Solution 2:[2]

Not a pro here but looks like you whant to chose one img from 2 available.

I think that the problem is that both images are child of <div>.

Try adding some attributes to <img> that you want to choose like <img id='One' class='One'> after that alter css to something like img.One{//style goes here; }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 FZs
Solution 2 marc_s

Related Questions