css select everything of the same class on hover

hover on element and highlight all elements with the same class with pure CSS

css select everything of the same class on hover

hover on element and highlight all elements with the same class with pure CSS

select everything

You have a lot of elements with the same class and you want to make them all change when you hover over one of them. Also known as this stackoverflow question.

The old way either meant:

• .foo:hover, .foo:hover ~ .foo: select yourself, and all the elements after you, but not before you.
• use javacript.

CSS has a new selector: :has() that though still experimental on most browsers would allow us to do what we want:

• body:has(.foo:hover) .foo: select .foo which is a child of body when body contains a .foo in :hover state.

Note: the above performs absymally, restricting to direct descendants is much faster:

• body:has(> .foo:hover) > .foo