Is there a selector for selecting previous sibling elements?

Question

The plus selector ( ) is used to select the next adjacent sibling.

Is there an equivalent to the previous sibling?

Answer 1

I found a way to style all previous siblings (as opposed to ~) that might work depending on your needs.

Suppose you have a list of links, when the mouse is hovering over one of the links, all the previous links should turn red. You can do 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>

Answer 2

No, there is no "previous sibling" selector.

Related to this, ~ is used for generic subsequent sibling elements (meaning that the element comes after this element, but not necessarily immediately after it), and is a CSS3 selector. Represents the next sibling, which is CSS2.1.

SeeAdjacent Sibling Combinators "http://www.w3.org/TR/css3-selectors/" rel="noreferrer">Selector Level 3 and 5.7 Adjacent Sibling Selectors From the Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) specification.