CODEWITHSUNDEEP
csscss-selectors
barakuda28
barakuda28

Reputation: 2902

Opposite of adjacent sibling selector?

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?

Upvotes: 17

Views: 19419

Answers (5)

Ramiro Ruiz
Ramiro Ruiz

Reputation: 225

I was looking for the same solution of targeting the elements behind the .activelink

I set a default style for any element before the one .active then I selected all after that one with the sibling selector.

a.active { background: #ccc;} a.active ~ * { background: yellow } a { background: red }

Demo: https://codepen.io/ramiro-ruiz/pen/gBOPQL

That worked for me, hope it helps.

Upvotes: 1

Steven Ventimiglia
Steven Ventimiglia

Reputation: 905

I have to say, this is an issue I had for a while, and one of the things I didn't like much ended up resolving this issue... float: right.

In my case, it was the input[type='radio'] + label element, and since CSS flows forward and not backwards, ~ input[type='radio'] + label would choose all the siblings after the element that was checked.

Since, float: right is responsible for taking "A, B, C" and positioning them as "C, B, A" - I changed the order of radio elements from 1-6 to 6-1 in the HTML, and made them float: right with CSS.

What this did was reverse them back into the order of 1-6 when rendered to the browser.

Now, when I used ~ input[type='radio'] + label, it still defined the styles the same way (which in my case, was the color of the label), however, the siblings being styled were now - visually - the preceding ones.

This thread is over a year old, but if anyone needs an example, I'll create and post a pen if asked.

Upvotes: 0

Vixed
Vixed

Reputation: 3499

Why don't you try using a sibling combinator?

a.active ~ a { background:red }

http://jsfiddle.net/VixedS/6x7d9vm7/

Upvotes: 0

Benjamin Gruenbaum
Benjamin Gruenbaum

Reputation: 276456

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

Upvotes: 7

BoltClock
BoltClock

Reputation: 724252

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

Upvotes: 6

Related Questions