+ is for the next sibling. Is there an equivalent for the previous sibling?
No, there is no "previous sibling" selector.
On a related note,
I had the same question, but then I had a "duh" moment. Instead of writing
Selectors level 4 introduces
… but at the time of writing, it is some distance beyond the bleeding edge for browser support.
Depending on your exact objective, there is a way to achieve the usefulness of a parent selector without using one (even if one were to exist)...
Say we have:
What can we do to make the Socks block (including sock colours) stand out visually using spacing?
What would be nice but doesn't exist:
What does exist:
This sets all anchor links to have 15px margin on the top and resets it back to 0 for those with no UL elements (or other tags) inside LIs.
There is no "previous" sibling selector unfortunately, but you can possibly still get the same effect by using positioning (e.g. float right). It depends on what you are trying to do.
In my case, I wanted a primarily CSS 5-star rating system. I would need to color (or swap the icon of) the previous stars. By floating each element right, I am essentially getting the same effect (the html for the stars thus must be written 'backwards').
I'm using FontAwesome in this example and swapping between the unicodes of fa-star-o and fa-star http://fortawesome.github.io/Font-Awesome/
If you know the exact position an
Which would select all
You also could select the nth-child right-to-left:
Which does the same.
There is no official way to do that at the moment but you can use a little trick to achieve this ! Remember that it is experimental and it has some limitation ... (check this link if you worries about navigator compatibility )
What you can do is use a CSS3 selector : the pseudo classe called
I found a way to style all previous siblings (opposite of
Let's say you have a list of links and when hovering on one, all the previous ones should turn red. You can do it like this:
Two tricks. Basically inverting the HTML order of your desired elements in HTML and using
This question is somewhat of an oxymoron.
Cascading Style Sheets. A cascade is like a waterfall: there's no backward motion. So, naturally, there is no previous sibling selector in CSS.
With flexbox, a previous sibling selector can be simulated.
In particular, the flex
Here's an example:
...and voilà! A previous sibling selector is born (or at least simulated).
Here's the full code:
From the spec:
Examples of "previous sibling selectors" created with the flex order property
Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
A Side Note – Two Outdated Beliefs about CSS
Flexbox is shattering long-held beliefs about CSS.
One such belief is that a previous sibling selector is not possible in CSS.
To say this belief is widespread would be an understatement. Here's a sampling of related questions on Stack Overflow alone:
As described above, this belief is not entirely true. A previous sibling selector can be simulated in CSS using the flex
Another long-standing belief has been that
In fact, the most current version of the spec – the W3C Editor's Draft – still asserts this to be true:
In reality, however, this information is obsolete and inaccurate.
Here's a demonstration of
Another flexbox solution
You can use inverse the order of elements in HTML. Then besides using
You can use the two axe selectors: