1

In HTML, I have an ordered list with some list items. When hovering, an item I want that all items below it to become blue and all items above (including the hovered one) to become red.

I was able to do the first part, but not the second part. Thank you!

ol li:hover~li {
  color: blue;
}
<ol>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
</ol>
Gerard
  • 15,418
  • 5
  • 30
  • 52
Bianca
  • 33
  • 4
  • 2
    Does this answer your question? [Is there a "previous sibling" selector?](https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector) – ikiK Sep 07 '20 at 17:17
  • No, because its list items were already one of the colors. Mine are default black. – Bianca Sep 07 '20 at 17:22
  • 1
    the duplicate details all the technique and the one used below are also there – Temani Afif Sep 07 '20 at 19:12

2 Answers2

1

Well , there is no proper way to select the previously present children in css.

what we can do is our own simple, creative tricks

ol li:hover~li {
  color: blue ;
}
ol:hover{
  color:red;
}
<ol>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
</ol>
Sandrin Joy
  • 1,120
  • 10
  • 28
1

The following combination of CSS rules (in this exact order) should do what you want:

ol:hover {
  color: red;
}

ol li:hover ~ li {
  color: blue;
}
<ol>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
</ol>
Johannes
  • 64,305
  • 18
  • 73
  • 130