How Can I Change the Color of Sibling Elements on Hover Using CSS?

How to Change Color of Sibling Elements on Hover with CSS

In HTML, it's common to have elements that are siblings, meaning they share the same parent element. When you hover over a specific element, you may want to modify the appearance of its sibling elements. However, CSS has limitations when it comes to styling previous siblings.

Solution:

CSS allows you to target sibling elements that follow the hovered element. For instance:

h1 {
    color: #4fa04f;
}
h1 + a {
    color: #a04f4f;
}

This code sets the color of the first

heading to green and the adjacent link to red.

To change the color of the link when hovering over the

heading, add the :hover pseudo-class:

h1:hover + a {
    color: #4f4fd0;
}

Note:

Changing the color of previous siblings is not possible with CSS. If you want to style a previous sibling, consider using JavaScript or a CSS framework that provides additional functionality.

Example with a Wrapper Element:

Wrapping the elements in a container (

) with an ID won't change the CSS rules. You would still follow the same principles as described above:

<div><pre class="brush:php;toolbar:false">#banner h1 {
    color: #4fa04f;
}
#banner h1 + a {
    color: #a04f4f;
}
#banner h1:hover + a {
    color: #4f4fd0;
}