I thought I could do this with advanced CSS selectors, but struggling.
I have a JS Fiddle here with the below example
Basically, how can I target every image here, except the first one? I don't want to use classes or IDs, I just want to use advanced selectors, if possible.
So something like .entry-content img:first-child (although I know that wouldn'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>
If you want to select all img tags except first one use :not
subclass:
.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
You'll need to exclude the image in the first div
child, rather than just the first img
child, as every img
is the first and only child of its div
while the div
elements themselves are siblings.
To do that, you can use this selector:
.entry-content div + div img
This selects the image in every div
that comes directly after another div
, so your first one won't be matched.
If you have siblings other than div
within .entry-content
you may need to use the general sibling selector instead:
.entry-content div ~ div img
apply a style to all the images. then apply a style to the first child that negates the other styles. make sure the style for the first child is after the styles for the other images in your stylesheet so that they are applied by the browser in the correct order.
This should help
.entry-content div:first-child img {
border: none;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.