Target previous siblings CSS

Question

I am able to target the "next" siblings using the ~ operator, but the previous sibling are not being targeted.

In the fiddle bellow, if you hover Menu items 1, 2 and 3 then the red font is removed. However if you then hover menu items 4 and 5 then the red font is visible. Is it possible with CSS to hide the red font no mater which menu item is hovered? I thought the sibling ~ selector would work for this but it seems to only target the next siblings.

HTML:

<ul>
  <li class="sub-menu">Active Menu 1</li>
  <li class="sub-menu">Active Menu 2</li>
  <li class="sub-menu active-menu">Active Menu 3</li>
  <li class="sub-menu">Active Menu 4</li>
  <li class="sub-menu">Active Menu 5</li>
</ul>

CSS:

.sub-menu {
  color: #000;
} 

.active-menu {
  color: red;
}

.hover {
  color: pink;
}
.hover ~ .sub-menu {
  color: #000;
}

https://jsfiddle.net/hubvill/bqkpywxj/12/

score -1 · Answer 1 · answered Feb 22 '20 at 00:22

You cannot target previous siblings with CSS but you wan rework your logic to something like this

(setting all items to black on :hover of the container)

.menu-container:hover .sub-menu {
  color: black;
}

.menu-container .sub-menu {
  color: #000;
}

.menu-container .active-menu {
  color: red;
}

.menu-container .sub-menu:hover {
  color: pink;
}

<div class="menu-container">
  <div class="sub-menu">Active Menu 1</div>
  <div class="sub-menu">Active Menu 2</div>
  <div class="sub-menu active-menu">Active Menu 3</div>
  <div class="sub-menu">Active Menu 4</div>
  <div class="sub-menu">Active Menu 5</div>
</div>

Target previous siblings CSS

1 Answers1