Geek Answers Handbook

CSS selectors apply style to all images except the first

I thought I could do this with advanced CSS selectors, but I'm afraid.

I have a JS script here with an example below

Basically, how can I target each image except the first? I do not want to use classes or identifiers, I just want to use advanced selectors, if possible.

So something like .entry-content img: first-child (although I know this won't work)

<div class='entry-content'> <div> <img src='http://placedog.com/400/300'/> </div> <div> <img src='http://placedog.com/400/300'/> </div> <div> <img src='http://placedog.com/400/300'/> </div> </div>
+7
source share
4 answers

If you want to select all img tags except the first, use a subclass :not :

 .entry-content div:not(:first-child) img


Working example: http://jsfiddle.net/GrAaA/



Browser Support:
:not http://caniuse.com/#search=%3Anot
:first-child http://caniuse.com/#search=%3Afirst-child

+11
source

You will need to exclude the image in the first child word of the div , and not just about the first child element of img , since each img is the first and only child of its div , and the div elements themselves are siblings.

For this you can use this selector:

 .entry-content div + div img

This selects the image in each div that appears immediately after the other div , so your first one will not be matched.

If you have siblings other than a div inside .entry-content , you may need to use a common selector instead:

 .entry-content div ~ div img
+6
source

apply style to all images. then apply the style to the first child, which denies the other styles. make sure that the style for the first child after the styles is for the other images in your stylesheet so that they are applied by the browser in the correct order.

0
source

This should help

 .entry-content div:first-child img { border: none; }​
0
source

More articles:


All Articles