Opposite of adjacent sibling selector?

Question

Please check this fiddle - http://jsfiddle.net/vfMsS/. I need to write selectors which select the element after the "active" element and the element before it. The "before" part doesn't seem to work. How to select the element before the a.active?

Answer 1

Like BoltClock said, there is no way to due this in current day browsers. However, I believe it is possible in CSS.

The CSS Selectors level 4 syntax (specifically see this) with the syntax E! + F for "An element E preceding an element F".

So in your case the syntax would be a! + a.active meaning "An element with tag a preceding an element with tag a and class active". As of today, this is not yet implemented in any layout engine

Answer 2

The adjacent sibling selector only looks forward, not backward. There is no - combinator for previous adjacent siblings.

If you simply need to select anything that isn't .active in the same parent, and you don't mind slightly reduced browser support, you can use :not() instead. If you need to specify a different style for the one that comes after .active, you need to override:

a:not(.active) { background:red }
a.active + a { background:yellow }

Again, this assumes they always share the same parent.

jsFiddle preview