The button and the light problem


You may have a button that when pressed makes a light come on. You can do this in CSS but what is the syntax to affect a CSS object when a different one is triggered? There is no one answer, it depends on the structure of the document.

Summary:

If the light is directly inside the container with the button (a child of the parent):


#button-container:hover > #light { background-color: yellow; }
If light is next to (after containers closing tag) the button container (siblings):



#button-container:hover + #light { background-color: yellow; }
If the light is somewhere inside the button container (descendant):



#button-container:hover #light { background-color: yellow; }
If the light is a sibling of the button container:

#button-container:hover ~ #light { background-color: yellow; }