Selecting adjacent elements on :hover
I wanted to lighten and shrink buttons adjacent to the button that I am hovering over. But some of the buttons are inside a containing 'div'.
For example, I have two 'div' elements with CSS class 'outer', and each 'div' contains 'input' elements which have a CSS class 'inner'.
So I first say:
.inner:hover ~ .inner,
.inner:has(~ .inner:hover) {
opacity: 0.7;
transform: scale3d(0.9,0.9,1);
}The above works for 'inner' elements within the same 'outer' element.
The '~' is the 'sibling selector'.
Then for the 'hover' to affect following 'outer' elements:
.outer:has(.inner:hover) ~ .outer .inner {
opacity: 0.7;
transform: scale3d(0.9,0.9,1);
}The above says: "if an 'outer' element has an 'inner' child that is being hovered over, and is followed by an 'outer' element then apply the following rule to the 'inner' elements of the second 'outer' element.
Then for the 'hover' to affect preceeding 'outer' elements:
.outer:has(~ .outer .inner:hover) .inner {
opacity: 0.7;
transform: scale3d(0.9,0.9,1);
}The above says: "if an 'outer' element has a following 'outer' element which has an 'inner' child element that is being hovered over, then apply the following rule to the 'inner' children of the first 'outer' element".
The above code uses the ':has' to get the following rule to be applied to the start of the selector. Usually, the rule is applied to the end of the selector.
In these pieces of code, I am only interested in a 'hover' over the 'input' elements and not a 'hover' over other parts of an 'outer' element.
There is an example on 'codepen' at:
'codepen.io/Bert-Beckwith/pen/JojaZdO'
There is a longer example on 'codepen' at:
'codepen.io/Bert-Beckwith/pen/ByaGQNq'
Sometimes parts of the above example do not work.
Maybe this example takes the idea too far.
I tried nesting a ':has' within a ':has' but this did not seem to work. Maybe the specification only allows a 'simple' selector inside a ':has'
Using ':has' may be slow. It seems the browser developers put off adding ':has' because they were worried about performance problems.
Using ':has' to get HTML elements before a selected element does not work on old versions of Firefox like the Extended Release of April 2025 meant for Windows 7 and 8. This Extended Release contains security updates but not all the new features. This means that this version of Firefox lightens and shrinks buttons after a 'hovered' element but not the buttons before. I use an '@supports selector' rule to hide the ':has' CSS from Firefox.
Unfortunately I find that lightening and shrinking buttons that are near a button that I am hovering over, tends to draw attention away from the button that I am hovering over.
I find it easier, when developing the code, to keep the selectors separate and to repeat the CSS rules even though they are the same. This is because if there is an error in the selector then only the following rule is not applied and the rest of the selectors and rules can still work. I try to remember to combine the selectors later.
I got the idea for all of this from an article by Chris Coyier in a newsletter called 'Sparks' that I get from 'codepen.io'. I quickly look through each weekly issue of the newsletter. I also quickly look through the 'Smashing' magazine newsletter I get each week.
The following lightens items next to an item that is being hovered over. This also lighten list item parents of the lower-down list items.
li:hover ~ li,
li:has(~ li:hover) {
opacity: 0.5;
}This works because the parent is also in the 'hover' state.