CSS plus with multiple selectors

user_6008007 0
Viewed 83

When using plus (+) in CSS for sibling selectors, is there a way to select multiple elements?

For example, this will color the background of the second inner div:

.item1:hover + .item2 div {
  background: red;
}
<div>
<div class="item1">
  <div>Hover me please</div>
</div>
<div class="item2">
  <div>Color me please</div>
</div>

<div class="item3">
  <div>Color me two please</div>
</div>

</div>

But I'd like to also select .item3 div as well. I tried it like this, but that doesn't work:

.item1:hover + .item2 div + .item3 div {
  background: red;
}
<div>
<div class="item1">
  <div>Hover me please</div>
</div>
<div class="item2">
  <div>Color me two please</div>
</div>

<div class="item3">
  <div>Color me three please</div>
</div>

</div>

Will I have to use the JS for this or is there a CSS way that I'm missing?

selector css
3 Answers

~ :is() @supports

.item1:hover ~ .item2 div,
.item1:hover ~ .item3 div {
  background: red;
}

@supports selector(:is()) {
  .item1:hover~ :is(.item2, .item3) div {
    background: orange;
  }
}
<div class="item1">
  <div>Hover me please</div>
</div>
<div class="item2">
  <div>Color me two please</div>
</div>
<div class="item3">
  <div>Color me three please</div>
</div>

user_37443040

The adjacent sibling selector (+) will only select the element directly following-- you want the general sibling combinator (~). See below for an example:

.item1:hover ~ .item2 div,
.item1:hover ~ .item3 div {
  background: red;
}
<div>
<div class="item1">
  <div>Hover me please</div>
</div>
<div class="item2">
  <div>Color me two please</div>
</div>

<div class="item3">
  <div>Color me three please</div>
</div>

</div>

(For what it's worth, connexo's answer leverages this same approach, but also makes selection more succinct by leveraging the :is() pseudo-class.)

Update

Regarding this comment:

They are both great solutions, although I just noticed one more thing, if I want to hover 2nd element to color 1st and 3d, in that scenario both of your solutions won't catch the 1st element. In other words, the elements that are behind the hovered element, won't react to this.

This is a slightly different scenario than is stated in the original question. Getting a previous sibling with CSS is, as far as I am aware, still not possible. However, we can cheat it by coloring all the targeted descendants on hover of the wrapper, and then resetting the currently hovered descendant. See below for an example:

.outer-wrapper:hover > div > div {
  background-color: red;
}

.outer-wrapper > div > div:hover {
  background-color: initial;
}
<div class="outer-wrapper">
  <div class="item1">
    <div>Hover me please</div>
  </div>
  <div class="item2">
    <div>Color me two please</div>
  </div>

  <div class="item3">
    <div>Color me three please</div>
  </div>
</div>

user_68313410

Try the below code

.item1:hover ~ :is(.item2, .item3) div {
  background: red;
}
<div>
<div class="item1">
  <div>Hover me please</div>
</div>
<div class="item2">
  <div>Color me two please</div>
</div>

<div class="item3">
  <div>Color me three please</div>
</div>

</div>

user_173445700
Related