Styling sibling hover and none hover

I recently had some complicated CSS to get my head around. I have a list of links which I want to style when they’re being hovered/focus on. But, if none of them are being hovered or focused, then I want to style the first one in the list.

The HTML

<ul>
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
  <li><a href="#">Five</a></li>
  <li><a href="#">Six</a></li>
</ul>

Styling the hover/focus

This is the simplest part - I am making the background of the links pink when they are hovered or focused.

li a:hover,
li a:focus {
  background-color: pink;
}

Styling the first element

Also, simple.

li:first-of-type a {
  background-color: pink;
}

Styling the siblings

If we just make the hover/focus pink and the first element pink when we aren’t hovering/focusing then the first element is pink which is what we want. But then it keeps being pink even when we’re hovering/focusing on something else. What we need to do is to unstyle the siblings when one is being hovered/focused.

li:has(~ li a:hover) a,
li:has(~ li a:focus) a {
  background-color: unset;
}

This is saying that if an li has a sibling with an a that is being hovered/focused, then style this a.

Downside

There is a downside to this. If you hover over an element, come off it so you’re not hovering on anything, then hover on another element shortly after, then the background jumps to the first one in between, which looks a bit odd.

Final code

Here is the whole code:

https://codepen.io/nicm42/pen/LEpgqRd

Styling sibling hover and none hover

Comments

More from this blog

Navigation underline animation

Trying AI autocomplete

Moving elements with JavaScript

Transitioning display: none

The HTML

Styling the hover/focus

Styling the first element

Styling the siblings

Downside

Final code

Command Palette

Comments

More from this blog

The HTML

Styling the hover/focus

Styling the first element

Styling the siblings

Downside

Final code