Opposite the adjacent selector?

Question

Check out this script - http://jsfiddle.net/vfMsS/ . I need to write selectors that select an element after the "active" element and the element in front of it. The "Before" part does not seem to work. How to select an item before a.active ?

Answer 1

Like BoltClock, there is no way in today's browsers to make this possible. However, I believe this is possible in CSS.

CSS Selectors level 4 syntax (see this ) with E! + F Syntax E! + F for "Element E preceding element F".

So, in your case, the syntax is a! + a.active a! + a.active , which means "An element with a tag preceding an element with a tag and class active." To date, this has not yet been implemented in any layout.

Answer 2

The adjacent selector only looks forward, not backward. Combinator - absent for previous related siblings.

If you just need to select something that is not .active in the same parent, and you don't mind slightly reducing browser support, you can use :not() instead. If you need to specify a different style for the one that appears after .active , you need to override:

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

Again, this assumes that they always have the same parent.

jsFiddle preview

Answer 3

Why don't you try using a combinator combinator?

 a.active ~ a { background:red } 

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

Answer 4

I have to say that this is a problem that I had for a while, and one of the things that I did not like, eventually solved this problem ... float: right .

In my case, it was an input[type='radio'] + label element, and since CSS moves forward and not backward, ~ input[type='radio'] + label will select all siblings after the element being checked.

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

What it did turned them back to order 1-6 when rendering to the browser.

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

This stream is older than a year, but if someone needs an example, I will create and publish a pen if asked.