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>
Approach: Use the :not(selector), also known as negation pseudo-class which takes a simple selector as an argument and allows you to style all the elements except the element specified by the selector.
By using the :not(:first-child) selector, you remove that problem. You can use this selector on every HTML element. Another common use case is if you use an unordered list <ul> for your menu.
Inline CSS has a higher priority than embedded and external CSS. So final Order is: Value defined as Important > Inline > id nesting > id > class nesting > class > tag nesting > tag.
The :first-child selector allows you to target the first element immediately inside another element.
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
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