Hover effect on siblings

Question

HTML/CSS:

body {
  padding: 50px;
}
ul li:first-child,
ul li:hover {
  color: blue;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

JsFiddle -here is a list having its first-element as default hovered. How can I remove hover effect on first child of list when its siblings are hovered?

When other than first li child elements are hovered to turn color of first-child to black.

Answer 1

Since CSS doesn't have a previous sibling selector, the closest you can get would be to use the selector ul:hover li:not(:hover) to select all li elements that are not currently being hovered over when hovering over the parent ul element. You can use that selector to override the other styling and set the li elements back to black:

Updated Example

ul {
  display: inline-block;
  list-style: none;
  margin: 0; padding: 0;
}
ul:hover li:not(:hover) {
  color: #000;
}
ul li:first-child,
ul li:hover {
  color: blue;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>