CODEWITHSUNDEEP
cssselector
DearBee
DearBee

Reputation: 426

CSS plus with multiple selectors

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?

Upvotes: 2

Views: 1039

Answers (3)

Alexander Nied
Alexander Nied

Reputation: 13623

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>

Upvotes: 3

Mubeen Ahmad
Mubeen Ahmad

Reputation: 438

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>

Upvotes: 1

connexo
connexo

Reputation: 56720

~ :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>

Upvotes: 2

Related Questions