Is there a "previous sibling" selector?
No, there is no "previous sibling" selector.
On a related note, ~
is for general successor sibling (meaning the element comes after this one, but not necessarily immediately after) and is a CSS3 selector. +
is for next sibling and is CSS2.1.
See Adjacent sibling combinator from Selectors Level 3 and 5.7 Adjacent sibling selectors from Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.
I found a way to style all previous siblings (opposite of ~
) that may work depending on what you need.
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:
/* default link color is blue */
.parent a {
color: blue;
}
/* prev siblings should be red */
.parent:hover a {
color: red;
}
.parent a:hover,
.parent a:hover ~ a {
color: blue;
}
<div class="parent">
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
</div>
Selectors level 4 introduces :has()
(previously the subject indicator !
) which will allow you to select a previous sibling with:
previous:has(+ next) {}
… but at the time of writing, it is some distance beyond the bleeding edge for browser support.