Hover Interactions With Sibling and Child Elements |
Did you know that you can use CSS selectors to target elements that have a relationship to one another? For example, let's say we're trying to set up a hover interaction.
If the two elements are siblings, we can use the tilde (~). The order does not matter as long as they are both siblings.
In addition to the tilde, if the elements are adjacent siblings, we can use the plus sign (+).
We can also create a hover interaction with elements that have a parent-child relationship. If the element you want to affect is a child element, you can use the greater-than sign.
If the element you want to affect is somewhere else down the family tree, like a grandchild or great-grandchild, you can just omit the special selection and have a space before the class name.