Is there a "previous sibling" selector?

Question

The plus sign selector (+) is for selecting the next adjacent sibling.

Is there an equivalent for the previous sibling?

Loquacious

Answer 1

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.

Moneyed

From the CSS3 standard: The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one. – Anu

@Lie Ryan: Yeah, but the point cletus is making in his answer is that you don't select the preceding element. – Marchelle

Here's an example I made to see what this can, and can't, do. jsfiddle.net/NuuHy/1 – Dominy

The jquery function useful for this is prev(). For example $("#the_element").prev().css("background-color", "red") – Dilettante

There are different methods to select the previous, via simple vanilla js – Ferrand

While it's true that there is no pure CSS previous sibling selector, for any practical use a workaround can be achieved with existing selectors combinations - as shown in the attached answer. Please consider editing your answer to include the link below, as it should be good enough for most use cases https://mcmap.net/q/37163/-can-css-detect-the-number-of-children-an-element-has – Bellew

Answer 2

Selectors level 4 proposes :has() which allows you to select a previous sibling with:

previous:has(+ next) {}

or (for a general previous sibling rather than adjacent one):

previous:has(~ next) {}

It has excellent browser support.

Excerpt

For tracking the status of has() on FIrefox please follow this issue on Bugzilla: bugzilla.mozilla.org/show_bug.cgi?id=418039 – Faithless

Answer 3

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>

Kissable

You can add an explanation of how it works. (it seems that you apply an style to all the items and to the following items but it can de described explicitly) – Uchida

yea, but a single previous is needed most of the time NOT ALL the previous ones! – Devoice

The links all turn red if I hover over the space between them, for me. – Underclay

All tags turn red when hovering over the parent–but at the same time not hovering over any of the child a tags–due to the .parent:hover a style. – Gamopetalous

@Underclay @JoeVanLeeuwen yes, this example only includes the minimum amount of rules to target previous siblings. To remove spacing you'd need to add more rules, probably changing the display of the contender – Kissable

This is a very cunning solution! The basic idea is to invert previous to be next: a) define a starting state b) on hover let's turn all siblings into how previous siblings should look c) then revert the current and next siblings elements back to the starting state, leaving only previous elements looked changed. – Gumbo

But you are not working with siblings, we are working here all the time with the parent. I mean, if you are allowed to add extra tags or use parent you can use the id of the corresponding sibling or use :nth-child("position") to work – Collinear

This technique seems to apply only when all your child elements are more-or-less the same entity, with shared styles. For instance, what if I have <div><a><a><div class='foo'><a><div class='foo'><a><a></div> and I want to say "if a link is followed by a .foo div, color it red; else color it blue"? There doesn't seem to be any way to do that without a real "previous" selector. – Supremacy

First sentence is misleading, you are not styling previous elements at any point. You're styling all of them, and then re-styling back current element and next siblings. – Homotaxis

Answer 4

Consider the order property of flex and grid layouts.

I'll focus on flexbox in the examples below, but the same concepts apply to Grid.

---

With flexbox, a previous sibling selector can be simulated.

In particular, the flex order property can move elements around the screen.

Here's an example:

You want element A to turn red when element B is hovered.

<ul>
    <li>A</li>
    <li>B</li>
</ul>

STEPS

1. Make the ul a flex container.
   
   

   ul { display: flex; }
   

---

2. Reverse the order of siblings in the mark-up.
   
   

   <ul>
      <li>B</li>
      <li>A</li>
   </ul>
   

---

3. Use a sibling selector to target Element A (~ or + will do) .
   
   

   li:hover + li { background-color: red; }
   

---

4. Use the flex order property to restore the order of siblings on the visual display.
   
   

   li:last-child { order: -1; }
   

---

...and voilà! A previous sibling selector is born (or at least simulated).

Here's the full code:

ul {
    display: flex;
}

li:hover + li {
    background-color: red;
}

li:last-child {
    order: -1;
}

/* non-essential decorative styles */
li {
    height: 200px;
    width: 200px;
    background-color: aqua;
    margin: 5px;
    list-style-type: none;
    cursor: pointer;
}

<ul>
    <li>B</li>
    <li>A</li>
</ul>

From the flexbox spec:

5.4. Display Order: the order property

Flex items are, by default, displayed and laid out in the same order as they appear in the source document. The order property can be used to change this ordering.

The order property controls the order in which flex items appear within the flex container, by assigning them to ordinal groups. It takes a single <integer> value, which specifies which ordinal group the flex item belongs to.

The initial order value for all flex items is 0.

Also see order in the CSS Grid Layout spec.

---

Examples of "previous sibling selectors" created with the flex order property.

.container { display: flex; }

.box5 { order: 1; }    
.box5:hover + .box4 { background-color: orangered; font-size: 1.5em; }

.box6 { order: -4; }
.box7 { order: -3; }
.box8 { order: -2; }
.box9 { order: -1; }
.box9:hover ~ :not(.box12):nth-child(-1n+5) { background-color: orangered;
                                              font-size: 1.5em; }
.box12 { order: 2; }
.box12:hover ~ :nth-last-child(-1n+2) { background-color: orangered;
                                        font-size: 1.5em; }
.box21 { order: 1; }
.box21:hover ~ .box { background-color: orangered; font-size: 1.5em; }

/* non-essential decorative styles */
.container {
    padding: 5px;
    background-color: #888;
}
.box {
    height: 50px;
    width: 75px;
    margin: 5px;
    background-color: lightgreen;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

<p>
Using the flex <code>order</code> property to construct a previous sibling selector
</p>

<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
    <div class="box box3"><span>3</span></div>
    <div class="box box5"><span>HOVER ME</span></div>
    <div class="box box4"><span>4</span></div>
</div>

<br>

<div class="container">
    <div class="box box9"><span>HOVER ME</span></div>
    <div class="box box12"><span>HOVER ME</span></div>
    <div class="box box6"><span>6</span></div>
    <div class="box box7"><span>7</span></div>
    <div class="box box8"><span>8</span></div>
    <div class="box box10"><span>10</span></div>
    <div class="box box11"><span>11</span></div>
</div>

<br>

<div class="container">
    <div class="box box21"><span>HOVER ME</span></div>
    <div class="box box13"><span>13</span></div>
    <div class="box box14"><span>14</span></div>
    <div class="box box15"><span>15</span></div>
    <div class="box box16"><span>16</span></div>
    <div class="box box17"><span>17</span></div>
    <div class="box box18"><span>18</span></div>
    <div class="box box19"><span>19</span></div>
    <div class="box box20"><span>20</span></div>
</div>

jsFiddle

---

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:

• Select the preceding sibling of an element in CSS using selectors
• CSS: select previous sibling
• CSS select previous sibling
• Previous adjacent selector in CSS
• Select previous siblings on hover
• CSS selector to get preceding sibling
• Change color of sibling elements on hover using CSS
• How to select the previous sibling using selenium css syntax
• CSS Selector for selecting an element that comes BEFORE another element?
• How to add styling to active input's previous sibling using CSS only
• CSS selector for next and previous elements
• How to affect other elements when a div is hovered

As described above, this belief is not entirely true. A previous sibling selector can be simulated in CSS using the flex order property.

The z-index Myth

Another long-standing belief has been that z-index works only on positioned elements.

In fact, the most current version of the spec – the W3C Editor's Draft – still asserts this to be true:

9.9.1 Specifying the stack level: the z-index property

z-index

• Value: auto | | inherit
• Initial: auto
• Applies to: positioned elements
• Inherited: no
• Percentages: N/A
• Media: visual
• Computed value: as specified

_{(emphasis added)}

In reality, however, this information is obsolete and inaccurate.

Elements that are flex items or grid items can create stacking contexts even when position is static.

4.3. Flex Item Z-Ordering

Flex items paint exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static.

5.4. Z-axis Ordering: the z-index property

The painting order of grid items is exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static.

Here's a demonstration of z-index working on non-positioned flex items: https://jsfiddle.net/m0wddwxs/

Hocus

The order property is not a solution since it is solely intended to change visual order, so it does not restore the original semantical order that you are forced to change in HTML for this workaround to work. – Strongminded

@Marat Tanalin: For 90% of use cases, assuming browser support isn't an issue, this will work just fine. The remaining 10% of use cases are either 1) cases where changing the visual order isn't a solution, or 2) cases that don't involve CSS at all. Thankfully, for #2, selectors-4 provides :has(), and it's simply up to the developers of selector libraries to implement it. – Marchelle

Actually, you know what, I made those stats up. It's probably more like 50-50, or 10-90, or something. The point is that, as now stated, this is just one solution that works for some people. But saying that "contrary to popular belief, there is in fact a previous sibling selector" is misleading at best, because it involves a layout technique, not a selector technique, which falls flat in use cases that don't involve CSS layout. This is why I've lately been much more picky about distinguishing between "pure CSS" and "pure CSS selectors". – Marchelle

Keep in mind that the CSS2.2 ED you're citing is, in essence, still CSS2. And flexbox and grid layout don't exist in CSS2, so as far as CSS2 is concerned, that information certainly holds true. At the very least, the text could be updated to mention that z-index may apply to other types of elements in future levels of CSS, the same way that it says other properties may establish a stacking context, such as opacity. – Marchelle

@Marchelle My comment has nothing to do with browser support. The technique breaks semantics in favor of presentation. I believe a plain regular class added to previous-sibling element on server side is much more reasonable. – Strongminded

@BoltClock, I appreciate your feedback. I see this entire thing from a practical perspective. And I wrote the answer for practical purposes. For developers who wish to target previous siblings on visual media, this technique may be useful. From the perspective of site users, previous siblings are being selected. So, for practical purposes, this can be deemed a previous sibling selector. – Hocus

From a technical perspective, I would agree this is not a PSS. But I generally try to provide answers that help solve real-world problems. I think this answer does that, using valid code and pure CSS. – Hocus

In case anyone is having trouble understanding when z-index will work, even when "omg, there's no position specified!", the specification mentions the concept of stacking context, which is explained nicely by this article on MDN – Ozonize

@RogierSpieker, thanks for posting that MDN article. I read it a while back and it's very helpful. I also wrote this, which also tries to explain stacking contexts: https://mcmap.net/q/37176/-understanding-z-index-stacking-order – Hocus

@Michael_B you're welcome! I've dealt with a lot of front-enders unaware of this. One other thing I'd like to mention, the faux previous sibling selector also works nicely with float: right (or any other means to reverse the ordering, of which flex/order has little (least?) side effects). Whipped up two fiddles: demonstrating the float: right approach, and demonstrating direction: rtl – Ozonize

@RogierSpieker, agreed. float:right is another method. I didn't mention it in my answer since it was already covered by at least two other answers to this question. – Hocus

@OzanKurt, a previous sibling selector is not possible in CSS. Therefore, all workarounds provided in these answers are obviously hacks or "cheats". Not sure what you were expecting. – Hocus

It's a common misconception that selectors have anything to do with the cascade. Cascading, as defined by CSS, happens on a per-element basis. There is nothing in theory that would preclude the existence of a previous sibling selector or make it an oxymoron - especially now that Selectors has transcended Cascading Style Sheets altogether, rendering the CSS argument moot. – Marchelle

Thanks for this clarification. I've removed that section from my answer and made other updates. @Marchelle – Hocus

Also, great analysis of CSS selectors utilized in non-CSS. I appreciate your separation of concerns argument and will keep it in mind. I also perused many of the links you referenced, including your whitespace in selectors, which was a useful refresher. Thanks, again. – Hocus

@MichaelBenjamin what if the list is dynamic? I am setting the position of the child elements to be absolute. So order doesn't change the position. But it seems to break things? and styles not applied to all the children. – Shoveler

Just want to mention this would severely damage a11y. You should NOT use this. – Tangy

@DannyvanHolten It depends on what content is being re-ordered. For most things there's no real issue with accessibility based on re-ordered contents, especially if you really care about a11y, wherein you should also be using things like taborder and aria-labels to help. – Dorree

@DannyvanHolten, how? Please elaborate. It's clear that developers need tools to solve their styling challenges. What does the order of elements have to do with the meaning of the content inside them, or their relation to each-other? – Crabb

@DannyvanHolten I withdraw my question. The example above shows the reordering of a <ul> with css order. I agree that lists should not have their order altered. Changing the order of a list (regardless if it's <ol> or <ul>) with flex order is a bad idea for accessibility sake, primarily because of the <li>'s relation to it's parent element (an unordered list). The expectation for lists is that they are presented and read by a screen reader in the order they appear in the <ul>. You should NOT reorder a list-item. Only reorder elements with no semantic or hierarchical relation to each other. – Crabb

@Crabb correct. Also, does not change the tab order. This leads to very weird behavior, and if there is anything focusable inside re-ordered elements, focus will be most likely jumping around the page. – Tangy

Answer 5

I had the same question, but then I had a "duh" moment. Instead of writing

x ~ y

write

y ~ x

Obviously this matches "x" instead of "y", but it answers the "is there a match?" question, and simple DOM traversal may get you to the right element more efficiently than looping in javascript.

I realize that the original question was a CSS question so this answer is probably completely irrelevant, but other Javascript users may stumble on the question via search like I did.

Flori

I believe that works when y can be found easily. Problem is if y can only be found relative to x, and in reversing it, you can't find y because you have to find x first. This is of course in reference to the question of y being preceding sibling rather than next, but may also apply for y being a following sibling. – Aragonite

You're being kind of harsh, Harsh. (sorry, couldn't resist.) The point is that sometimes you just need to know "does y exist?". Other times you can use ":before" to put something between the two elements. Finally, if you do have to drop into jQuery, using find("y ~ x").prev() is easier than many alternatives. – Flori

The idea of a previous sibling selector is that it will select the previous element. Unfortunately, reversing it, as described here, doesn't provide this functionality. – Edda

@BryanLarsen Applying logic without testing properly. That's not expected even though your answer seems smart enough. – Appraisal

Thanks @Edda for the clarification that this answer doesn't provide an actual solution to the original question, I was starting to feel myself stupid thinking about how y ~ x could solve my problem – Emory

I don't see how this works, it's this the same y > x? – Boeschen

You're right, @sevenupcan, it doesn't work. The point of this answer is to get people to ask themselves if they really need x ~ y, can they make y ~ x work for them? Some people can, some people can't. It often times it makes sense to re-examine your question while looking for an answer. – Flori

but I cannot using this when I am using the same tags but it is only possible when I have to use id , class or different tags – Peri

I understand the idea behind this answer, however the reasoning given in the answer doesn't quite make sense. The selector y ~ x doesn't answer the "is there a match?" question, because the two selectors given here mean completely different things. There is no way y ~ x could ever produce a match given the subtree <root><x/><y/></root> for example. If the question is "does y exist?" then the selector is simply y. If the question is "does y exist given a sibling x in any arbitrary position?" then you'd need both selectors. (Though maybe I'm just nitpicking at this point...) – Marchelle

This is wrong. This selects x's that come after y's. But what you want to do is select x's that come before y's. – Hardwick

Answer 6

There's not "previous selector", but you can use the combination of :not and ~ ("after selector"). No reverse order, no javascript.

.parent a{
  color: blue
}

.parent a.active{
  color: red
}

.parent a:not(.parent a.active ~ a){
  color: red
}

<div class="parent">
  <a href="">link</a>
  <a href="">link</a>
  <a href="" class="active">link</a>
  <a href="">link</a>
  <a href="">link</a>
</div>

I think my approach is more straight-forward than "style all divs, than remove styling for after divs", or using javascript, or using reverse order.

Dwinnell

Off-note to readers: please note that this is not a previous sibling selector but rather a "general previous sibling" selector in that it will match any matching element, not just the previous one (does not take away from the solution, though, which is quite inventive). – Gospodin

I used .parent a:not(.parent a.active ~ a, a.active, .parent :first-child) { color: red } to color only the second child. – Andro

This answer is like a complicated way of doing the 2015 answer by mantish – Kensell

Works for css tabs where the div to be displayed comes before the checked input!!! I didn't believe that someone could find such an inventive solution for the reverse order of tags: div-input as the normal order, input-div is easy to be coded!!! but still the answer about previous sibling selector remains no. – Consubstantiate

Answer 7

Three tricks:
basically, reversing the HTML order of your elements in HTML,
and using the ~ Next siblings operator:

1. Using CSS Flex and row-reverse

.reverse {
  display: inline-flex;
  flex-direction: row-reverse;
}
.reverse span:hover ~ span { /* On SPAN hover target its "previous" elements */
  background:gold;
}

Hover a SPAN and see the previous elements being styled!<br>

<div class="reverse">
  <!-- Reverse the order of inner elements -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>

2. Using Flex with direction: RTL

.reverse {
  display: inline-flex;
  direction: rtl;
}
.reverse span:hover ~ span { /* On SPAN hover target its "previous" elements */
  background: red;
}

Hover a SPAN and see the previous elements being styled!<br>

<div class="reverse">
  <!-- Reverse the order of inner elements -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>

3. Using float right

.reverse { 
  display: inline-block;
}
.reverse span{
  float: right; 
}
.reverse span:hover ~ span { /* On SPAN hover target its "previous" elements */
  background: red;
}

Hover a SPAN and see the previous elements being styled!<br>

<div class="reverse">
  <!-- Reverse the order of inner elements -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>

Nihil

Answer 8

+ is for the next sibling. Is there an equivalent for the previous sibling?

You can use the two axe selectors: ! and ?

There are 2 subsequent sibling selectors in conventional CSS:

• + is the immediate subsequent sibling selector
• ~ is the any subsequent sibling selector

In conventional CSS, there is no previous sibling selector.

However, in the axe CSS post-processor library, there are 2 previous sibling selectors:

• ? is the immediate previous sibling selector (opposite of +)
• ! is the any previous sibling selector (opposite of ~)

Working Example:

In the example below:

• .any-subsequent:hover ~ div selects any subsequent div
• .immediate-subsequent:hover + div selects the immediate subsequent div
• .any-previous:hover ! div selects any previous div
• .immediate-previous:hover ? div selects the immediate previous div

div {
  display: inline-block;
  width: 60px;
  height: 100px;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

code {
  display: block;
  margin: 4px;
  font-size: 24px;
  line-height: 24px;
  background-color: rgba(0, 0, 0, 0.5);
}

div:nth-of-type(-n+4) {
  background-color: rgb(0, 0, 255);
}

div:nth-of-type(n+3):nth-of-type(-n+6) {
  opacity: 1;
}

.any-subsequent:hover ~ div,
.immediate-subsequent:hover + div,
.any-previous:hover ! div,
.immediate-previous:hover ? div {
  opacity: 1;
}

<h2>Hover over any of the blocks below</h2>

<div></div>
<div></div>

<div class="immediate-previous">Hover for <code>?</code> selector</div>
<div class="any-previous">Hover for <code>!</code> selector</div>
<div class="any-subsequent">Hover for <code>~</code> selector</div>
<div class="immediate-subsequent">Hover for <code>+</code> selector</div>

<div></div>
<div></div>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

Friedcake

This give me a syntax error when I try to implement it on sass inside a rails project. – Yelena

axe is a CSS post-processor. It does not use the same syntax as CSS pre-processors such as Sass, Less or Stylus. – Friedcake

@Friedcake would you mind adding some documentation links ? I cannot find axe post-processor. – Fanaticism

@Fanaticism - Thanks for your interest. axe is a project I started in late 2016, when I didn't know ES2015 and even objects in JS were very new to me. The GitHub repository is here: github.com/RouninMedia/axe . I very much mean to return to this at some point (I've also developed something called axe-blades which are the CSS equivalent of javascript events), but I need to complete my work on another project (codenamed ashiva) first. – Friedcake

Answer 9

Another flexbox solution

You can use inverse the order of elements in HTML. Then besides using order as in Michael_B's answer you can use flex-direction: row-reverse; or flex-direction: column-reverse; depending on your layout.

Working sample:

.flex {
  display: flex;
  flex-direction: row-reverse;
   /* Align content at the "reversed" end i.e. beginning */
  justify-content: flex-end;
}

/* On hover target its "previous" elements */
.flex-item:hover ~ .flex-item {
  background-color: lime;
}

/* styles just for demo */
.flex-item {
  background-color: orange;
  color: white;
  padding: 20px;
  font-size: 3rem;
  border-radius: 50%;
}

<div class="flex">
  <div class="flex-item">5</div>
  <div class="flex-item">4</div>
  <div class="flex-item">3</div>
  <div class="flex-item">2</div>
  <div class="flex-item">1</div>
</div>

Aretina

Answer 10

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 nth-child()

#list>* {
  display: inline-block;
  padding: 20px 28px;
  margin-right: 5px;
  border: 1px solid #bbb;
  background: #ddd;
  color: #444;
  margin: 0.4em 0;
}

#list :nth-child(-n+4) {
  color: #600b90;
  border: 1px dashed red;
  background: orange;
}

<p>The oranges elements are the previous sibling li selected using li:nth-child(-n+4)</p>

<div id="list">
  <span>1</span><!-- this will be selected -->
  <p>2</p><!-- this will be selected -->
  <p>3</p><!-- this will be selected -->
  <div>4</div><!-- this will be selected -->
  <div>5</div>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
</div>

Limitations

• You can't select previous elements based on the classes of the next elements
• This is the same for pseudo classes

Scroll

Why do they have to be the same node? Why not just use :nth-child(-n+4)? – Nievesniflheim

@Nievesniflheim because the :nth-child(-n+4) is a pseudo class that needs to be apply to a selector in order to work properly. If you are not convince, try to experiment it using a fork of my fiddle and you'll see that it doesn't wok – Scroll

Actually, you can go node-type independent using the * selector, but it's obnoxiously bad practice. – Hundley

Actually, it does work for different nodes: jsfiddle.net/aLhv9r1w/316. Please update your answer :) – Nitriding

I had a complex selector, but let's say it's li#someListItem and I wanted the node(s) right before it (which is how I interpret "previous") - I don't see how the information you provided can help me express that through CSS. You're just selecting the first n siblings, and assume I know the n. Based on this logic, any selector might do the trick and select the element(s) I need (such as :not() ). – Maegan

What? This just selects the first four elements. Not at all what was asked. – Alvita

Answer 11

Things have changed in 2023. Now there is such selector:

    // 1 item before
    :has(+ .item:hover) {
        ...
    }

If you want to select 3 items before, you do something like:

    // 3 items before
    :has(+ .item:hover),
    :has(+ .item + .item:hover),
    :has(+ .item + .item + .item:hover) {
        ...
    }

See my demo here https://codepen.io/ro31337/pen/YzJbEZv

Koziol

You can also use item:has(~ item:hover) to change ALL previous siblings before the currently hovered element. – Fitzgerald

Answer 12

You could use double negation

SELECTOR:not([SELECTOR]FILTER):not([SELECTOR]FILTER + SELECTOR) { ... }

Replace SELECTOR with either the TAG or .CLASS ( Using #ID is probably too specific ). Replace FILTER with some other :PSUEDO-SELECTOR (I've only tried :hover) or .CLASS (More for toggling through Javascript).

Since the typical usage will probably rely upon hovering (See example that follows)

/* Effect only limited when hovering */
TAG.CLASS:not(TAG.CLASS:hover):not(TAG.CLASS:hover + TAG.CLASS) {}
/* Effect only applied when hovering */
PARENT.CLASS:hover > CHILD.CLASS:not(CHILD.CLASS:hover):not(CHILD.CLASS:hover + CHILD.CLASS) {}

/* Solution */
div.parent:hover > div.child:not(:hover):not(:hover ~ .child)  {
    background-color:red;
    border-radius:1.5em;
}
div.parent:hover > div.child:not(:hover):not(:hover ~ .child) > div {
    background-color:yellow;
}

/* Make pretty (kinda) */
div.parent {
  width:9em;
  height:9em;
  /* Layout */
  display:grid;
  grid-template-columns : auto auto auto;
  grid-template-rows : auto auto auto;
}
div.child {
  /* Dimensions */
  height:3em;
  width:3em;
  /* Layout */
  position:relative;
  /* Cursor */
  cursor: pointer;
  /* Presentation */
  border: 1px black solid;
  border-radius:1.5em;
}
.star {
  /* Dimensions */
  width: 2.5em;
  height: 2.5em;
  /* Placement */
  position:absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  /* Geometry */
  -webkit-clip-path: polygon(
    50% 0%,
    63% 38%,
    100% 38%,
    69% 59%,
    82% 100%,
    50% 75%,
    18% 100%,
    31% 59%,
    0% 38%,
    37% 38%
  );
  clip-path: polygon(
    50% 0%,
    63% 38%,
    100% 38%,
    69% 59%,
    82% 100%,
    50% 75%,
    18% 100%,
    31% 59%,
    0% 38%,
    37% 38%
  );
  /* Presentation */
  background-color: lightgrey;
}
div.child:hover {
    /* Presentation */
    background-color:yellow;
    border-radius:1.5em;
}
div.child:hover > div.star {
    /* Presentation */
    background-color:red;
}

<div class="parent">
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
 </div>

Bovid

Answer 13

My requirement was to select currently hovered item's previous and next two siblings with the help of @Quentin 's answer I selected previous siblings.

.child{
  width: 25px;
  height: 25px;
}

.child:hover {
    background:blue;
}

 .child:has( + .child:hover) {
  background: yellow;
}

.child:has(+ .child + .child:hover){
  background:green;
}

.child:hover + .child {
  background: red;
}

.child:hover + .child + .child {
  background: magenta;
}

<ul class="parent">
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
</ul>

To select all previous siblings

.child {
    width: 25px;
    height: 25px;
}

.child:hover {
    background: blue;
}

.child:has(~ .child:hover) {
    background: red;
}

<ul class="parent">
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
</ul>

Trover

This actually works to select only the next previous sibling, and not all of them. – Aragonite

Answer 14

Overriding the styles of next siblings on hover, so that it looks like only previous siblings have styles added on hover.

ul li {
  color: red;
}

ul:hover li {
  color: blue;
}

ul:hover li:hover ~ li{
  color: red;
}

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

Pteryla

Answer 15

If you know the exact position an :nth-child()-based exclusion of all following siblings would work.

ul li:not(:nth-child(n+3))

Which would select all lis before the 3rd (e.g. 1st and 2nd). But, in my opinion this looks ugly and has a very tight usecase.

You also could select the nth-child right-to-left:

ul li:nth-child(-n+2)

Which does the same.

Phemia

Answer 16

No. It is not possible via CSS. It takes the "Cascade" to heart ;-).

---

However, if you are able to add JavaScript to your page, a little bit of jQuery could get you to your end goal.
You can use jQuery's find to perform a "look-ahead" on your target element/class/id, then backtrack to select your target.
Then you use jQuery to re-write the DOM (CSS) for your element.

Based on this answer by Mike Brant, the following jQuery snippet could help.

$('p + ul').prev('p')

This first selects all <ul>s that immediately follow a <p>.
Then it "backtracks" to select all the previous <p>s from that set of <ul>s.

Effectively, "previous sibling" has been selected via jQuery.
Now, use the .css function to pass in your CSS new values for that element.

---

In my case I was looking to find a way to select a DIV with the id #full-width, but ONLY if it had a (indirect) descendant DIV with the class of .companies.

I had control of all the HTML under .companies, but could not alter any of the HTML above it.
And the cascade goes only 1 direction: down.

Thus I could select ALL #full-widths.
Or I could select .companies that only followed a #full-width.
But I could not select only #full-widths that proceeded .companies.

And, again, I was unable to add .companies any higher up in the HTML. That part of the HTML was written externally, and wrapped our code.

But with jQuery, I can select the required #full-widths, then assign the appropriate style:

$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );

This finds all #full-width .companies, and selects just those .companies, similar to how selectors are used to target specific elements in standard in CSS.
Then it uses .parents to "backtrack" and select ALL parents of .companies,
but filters those results to keep only #fill-width elements, so that in the end,
it only selects a #full-width element if it has a .companies class descendant.
Finally, it assigns a new CSS (width) value to the resulting element.

$(".parent").find(".change-parent").parents(".parent").css( "background-color", "darkred");

div {
  background-color: lightblue;
  width: 120px;
  height: 40px;
  border: 1px solid gray;
  padding: 5px;
}
.wrapper {
  background-color: blue;
  width: 250px;
  height: 165px;
}
.parent {
  background-color: green;
  width: 200px;
  height: 70px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="wrapper">

  <div class="parent">
    "parent" turns red
    <div class="change-parent">
    descendant: "change-parent"
    </div>
  </div>
  
  <div class="parent">
    "parent" stays green
    <div class="nope">
    descendant: "nope"
    </div>
  </div>
  
</div>
Target <b>"<span style="color:darkgreen">parent</span>"</b> to turn <span style="color:red">red</span>.<br>
<b>Only</b> if it <b>has</b> a descendant of "change-parent".<br>
<br>
(reverse cascade, look ahead, parent un-descendant)
</html>

jQuery Reference Docs:
$() or jQuery(): DOM element.
.find: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
.parents: Get the immediately preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the previous sibling only if it matches that selector (filters the results to only include the listed elements/selectors).
.css: Set one or more CSS properties for the set of matched elements.

Cissy

This has nothing to do with the question. Of course it's possible using JS and you don't even need jQuery for this (previousElementSibling). – Principality

@FabianvonEllerts I answered OP's question directly in the first line of my response. As my answer states, it is literally not possible via CSS. I then provided 1 possible path forward to achieve the goal, using a technology (JS | JQuery) that users of CSS might be familiar with and have access to. For example, many WordPress sites also have JQuery, so it is an easy entry point: easy to use, remember, and expand upon. It'd be irresponsible to simply answer NO, without providing an alternate way to accomplish the goal. I shared what I learned and used when I had the same question. – Cissy

previousElementSibling() for those more familiar with native JS DOM functions could provide another non-CSS path forward. – Cissy

I found the other CSS HACKS very interesting, but for my particular use case they either did not work (fell into the caveats category), or were too convoluted. For others that fall into the same circumstance, it is fair to share this easy-to-use method that can work, where the above solutions fail, or would be too difficult to implement/maintain. Many CSS HACKS were shared. This work around was not covered. NONE of the answers use the + (non-existent) selector that the OP specifically asked for. Consider this answer a JS "hack". It's here to save someone else time I spent to find a solution. – Cissy

"It takes the "Cascade" to heart ;-)." Well said. You could probably have stopped right there. ;^D – Wheelbarrow

Answer 17

/* Add a style to all the children, then undo the style to the target 
and sibling children of your target. */

ul>li {
  color: red;
}

ul>li.target,
ul>li.target~li {
  color: inherit;
}

<ul>
  <li>before</li>
  <li class="target">target</li>
  <li>after</li>
  <li>after</li>
</ul>

Dyanne

I think https://mcmap.net/q/37029/-is-there-a-quot-previous-sibling-quot-selector is somewhat the same approach, but this one uses inherit for the other elements which might help keep the focus on the question's literal ask of equivalence for previous sibling – Legal

Answer 18

I've found the easiest solution. It might only apply based on what you're doing.

Let's say you want to hover on "sibling_2" to change "sibling_1" in the example below:

<div class='parent'>
  <div class='sibling_1'></div>
  <div class='sibling_2'></div>
</div>

Since there's no previous element selector you can simply switch 'sibling_1' and 'sibling_2' around and apply so they look the same.

.parent {
  display: flex;
  flex-direction: row-reverse;
}

Now you can select them like that.

.sibling_1:hover ~ .sibling_2 {
  #your CSS
}

Hoopla

Answer 19

You can use :has() as following.

.thePrevious:has(+ .theNextSibling)

I used this for fixing overlapping bootstrap modals as follows. Any previous modals will be hidden if there are multiple.

.modal.show.modal--open:has(~ .modal.show.modal--open){
   opacity: 0;
 }

Anthropologist

Answer 20

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:

<div>
  <ul>
    <li><a>Pants</a></li>
    <li><a>Socks</a></li>
    <ul>
      <li><a>White socks</a></li>
      <li><a>Blue socks</a></li>
    </ul>
  </ul>
</div>

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:

ul li ul:parent {
  margin-top: 15px;
  margin-bottom: 15px;
}

What does exist:

li > a {
  margin-top: 15px;
  display: block;
}
li > a:only-child {
  margin-top: 0px;
}

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.

Lahnda

This doesn't answer the question. – Frigidaire

Answer 21

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/

CSS:

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* set all stars to 'empty star' */
.stars-container {
    display: inline-block;      
}   

/* set all stars to 'empty star' */
.stars-container .star {
    float: right;
    display: inline-block;
    padding: 2px;
    color: orange;
    cursor: pointer;

}

.stars-container .star:before {
    content: "\f006"; /* fontAwesome empty star code */
}

/* set hovered star to 'filled star' */
.star:hover:before{
    content: "\f005"; /* fontAwesome filled star code */
}

/* set all stars after hovered to'filled star' 
** it will appear that it selects all after due to positioning */
.star:hover ~ .star:before {
    content: "\f005"; /* fontAwesome filled star code */
}

HTML: (40)

JSFiddle: http://jsfiddle.net/andrewleyva/88j0105g/

Existential

float right and + or ~ selectors strikes me as the cleanest work around. – Foamy

Answer 22

There isn't, and there is.

If you must place the label before the input, just place the label after the input and keep both the label & the input inside a div, and style the div as following :

.input-box {
  display: flex;
  flex-direction: column-reverse;
}

<div class="input-box">
  <input
   id="email"
   class="form-item"           
   />

   <label for="email" class="form-item-header">                  
   E-Mail*                  
   </label>
</div>

Now you can apply the standard next sibling styling options available in css, and it will appear like you are using a previous sibling styling.

Fasces

Answer 23

I fixed this problem by putting my elements in a flexbox and then using flex-direction: column-reverse.

Then I had to invert my elements in the HTML manually (put them in reverse order), and it looked normal and it worked!

<div style="display: flex; flex-direction: column-reverse">
  <a class="element2">Element 2</a>
  <a class="element1">Element 1</a>
</div>
...
<style>
  .element2:hover + element1 {
    ...
  }
</style>

Chock

Answer 24

There is actually no selector that can select the previous sibling in css. But it is possible to use certain tricks. For example, if you want to change the style of the previous element when you hover over any element, you can use this:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .element:has(+ .next-element:hover){
      /* here your style for .element */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="element"></div>
    <div class="next-element"></div>
  </div>
</body>
</html>

In this situation if you hover over .next-element the style of .element will change as you defined above

Drabbet

Answer 25

I needed a solution to select the previous sibling tr. I came up with this solution using React and Styled-components. This is not my exact solution (This is from memory, hours later). I know there is a flaw in the setHighlighterRow function.

OnMouseOver a row will set the row index to state, and rerender the previous row with a new background color

class ReactClass extends Component {
  constructor() {
    this.state = {
       highlightRowIndex: null
    }
  }

  setHighlightedRow = (index) => {
    const highlightRowIndex = index === null ? null : index - 1;
    this.setState({highlightRowIndex});
  }

  render() {
    return (
       <Table>
        <Tbody>
           {arr.map((row, index) => {
                const isHighlighted = index === this.state.highlightRowIndex
                return {
                    <Trow 
                        isHighlighted={isHighlighted}
                        onMouseOver={() => this.setHighlightedRow(index)}
                        onMouseOut={() => this.setHighlightedRow(null)}
                        >
                        ...
                    </Trow>
                }
           })}  
        </Tbody>   
       </Table>
    )
  }
}

const Trow = styled.tr`
    & td {
        background-color: ${p => p.isHighlighted ? 'red' : 'white'};
    }

    &:hover {
        background-color: red;
    }
`;

Federation

Answer 26

There is no such selector, but in the DOM API has a pretty read-only property

Node.previousSibling

Backler

Answer 27

I had a similar problem and found out that all problem of this nature can be solved as follows:

1. give all your items a style.
2. give your selected item a style.
3. give next items a style using + or ~.

and this way you'll be able to style your current, previous items(all items overridden with current and next items) and your next items.

example:

/* all items (will be styled as previous) */
li {
  color: blue;
}

/* the item i want to distinguish */
li.milk {
  color: red;
}

/* next items */
li ~ li  {
  color: green;
}


<ul>
  <li>Tea</li>
  <li class="milk">Milk</li>
  <li>Juice</li>
  <li>others</li>
</ul>

Hope it helps someone.

Wendeline

it's basically the same trick as in older answer from the same thread: https://mcmap.net/q/37029/-is-there-a-quot-previous-sibling-quot-selector – Sewell

But this one bothers to explain what it's doing, unlike the other one. – Miserere

@Teepeemm, I agree. I saw that answer, and I skipped over it because there was no good explanation. It was just "look what I did and copy me!" – Luzern

Answer 28

here is the link for a similar question

CSS select all previous siblings for a star rating

So I post my solution using bits of everyones responses and anyone can use it as reference and possibliy recommend improvements.

// Just to check input value
// Consts
const starRadios = document.querySelectorAll('input[name="rating"]');

// EventListeners
starRadios.forEach((radio) => radio.addEventListener('change', getStarRadioValue));

// Get star radio value
function getStarRadioValue(event) { 
    alert(event.target.value) 
    // Do something with it
};

.star-rating {
  font-size: 1.5rem;
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: left;
}
.star-rating.editable label:hover {
  cursor: pointer;
}
.star-rating.editable .icon-star:hover,
.star-rating.editable .icon-star:hover ~ .icon-star {
  background-color: #fb2727 !important;
}

.icon-star {
  position: relative;
  background-color: #72747d;
  width: 32px;
  height: 32px;
  display: inline-block;
  transition: background-color 0.3s ease;
}
.icon-star.filled {
  background-color: #fb2727;
}

.icon-star > label {
  display: inline-block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
}

.icon-star > label > input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(50%) translateX(50%);
  display: none;
}

<div class="star-rating editable">
  <span class="icon-star">
    <label>
      <input type="radio" name="rating"  value="5" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating" value="4" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating" value="3" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating" value="2" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating"  value="1" />
    </label>
  </span>
</div>

Biisk

Answer 29

I found a way, try this:

.prev_item:has(+ .next_item) {
  color: red;
}

It will change the color of .prev_item if it is the sibling before .next_item;

Handling

Answer 30

For my use case was needed to change previous element style on focus and hover only having 2 items in parent element. to do so used :focus-within and :hover pseudo-classes.

like so selecting whenever focus/hover event occurs

.root-element:hover .element-to-style { background-color: red;} 
.root-element:focus-within .element-to-style { background-color: green;} 

<div class="root-element">
<span class="element-to-style"> TextFocused</span>
<input type="text" placeholder="type To Style"/>

</div>

Victorinavictorine

This answer for me is not working! – Afraid

This is not really a previous sibling selection situation. – Dorree

Answer 31

Here's my working solution using only CSS for gold stars (SCSS specifically in this case)

• I have 5 initially grey stars inside a container div
• On hover of the container div, I make all the stars gold
• On hover over the specific star, I make all successor sibling divs grey

Below is svelte code (but can easily be converted into HTML)

<button id="review">
        <div id="star-container">
          <div><Fa icon="{faStar}" /></div>
          <div><Fa icon="{faStar}" /></div>
          <div><Fa icon="{faStar}" /></div>
          <div><Fa icon="{faStar}" /></div>
          <div><Fa icon="{faStar}" /></div>
        </div>
</button>

<style lang="scss">
  #review {
    color: $cool-gray;
    #star-container {
      display: flex;
      &:hover {
        color: $custom-gold;
      }
      div {
        &:hover ~ div {
          color: $cool-gray;
        }
      }
    }
  }
</style>

Capsule

Answer 32

I had this same problem, while I was trying to change prepend icon fill color on input focus, my code looked something like this:

<template #append>
    <b-input-group-text><strong class="text-danger">!</strong></b-input-group-text>
</template>
<b-form-input id="password_confirmation" v-model="form.password_confirmation" type="password" placeholder="Repeat password" autocomplete="new-password" />

The problem was that I'm using a vue-bootstrap slot to inject the prepend, so even if i change the location still get rendered after the input

Well my solution was to swipe their location, and add custom prepend and used ~ symbol, as css doesn't support previous sibling.

<div class="form-input-prepend">
    <svg-vue icon="common.lock" />
</div>
<b-form-input id="password_confirmation" v-model="form.password_confirmation" type="password" placeholder="Repeat password" autocomplete="new-password" />

Scss style

.form-control:focus ~ .form-input-prepend {
    svg path {
        fill: $accent;
    }
}

So just try to change its position, and if necessary use css order or position: absolute; to achieve what you want, and to avoid using javascript for this kind of needs.

Gromwell

Answer 33

Though there is no previous CSS selector. I've found a quick and easy method to select one yourself. Here is the HTML markup:

<div class="parent">
    <div class="child-1"></div>
    <div class="child-2"></div>
</div>

In your JavaScript simply do:

document.querySelector(".child-2").parentElement.querySelector(".child-1")

This will first select the parent div and later on select the child-1 div from the child-2 div.

If you are using jQuery you can simply do:

$(".child-2").prev()

Ferrand