Confused what classes and IDs are being affected

[bherzberg96]

I found this code snippet online and I'm confused as to why there's multiple classes and IDs in the individual CSS groups. This is my HTML code:

<div class="buttons"><img src="assets/button.png" id="up" style="position: absolute;"><img src="assets/button2.png" id="over"></div>

and the corresponding CSS code:

#up, .buttons:hover #over {-webkit-opacity: 1;-moz-opacity: 1;opacity: 1;} .buttons:hover #up, #over {-webkit-opacity: 0;-moz-opacity: 0;opacity: 0;}

What these codes do is when I hover over the button, it fades out the original button (e.g. the up button) and fades in the other button (e.g. the over button). After you remove the cursor from the button, the over button fades out and the original/up button fades back in, returning to its original appearance from before I hovered over it. I'm grateful it works, but I'm personally confused as to why the CSS code needs '#up, .buttons:hover #over' and '.buttons:hover #up, #over'. What does this combination of classes and IDs do to the code to make it work properly? This is simply a question to enhance my understanding of CSS and combining classes and IDs in the same CSS group. Thanks!

Edited January 6, 2013 by bherzberg96

[jeffman]

1. Commas separate unique selectors that share a rule set. The rule set will be applied to every selector in a list that is separated by a comma. A comma is not part of a selector, and any selector separated by a comma can be removed from the list without affecting the other selectors that share the same rule set. Listing multiple selectors that share the same rule set is a technique that exists for efficiency. You don't have to paste the same rule set multiple times. 2. When selectors are "chained" with spaces between them, only the last selector in the chain is affected by the rule set. The previous items in the chain specify the ancestry of the last selector (so we can pinpoint it exactly) and any behavioral conditions (like :hover) that must be met. So the first rule set affects the image with ID="up" under all conditions. Separately, it affects the "over" image <i>when</i> the mouse hovers over its ancestor div "buttons." This rule set makes both those elements 100% opaque. The second rule set works affects the same elements in the opposite way. Together, the rule sets are a kind of on-off switch, as you've observed.

[bherzberg96]

1. Commas separate unique selectors that share a rule set. The rule set will be applied to every selector in a list that is separated by a comma. A comma is not part of a selector, and any selector separated by a comma can be removed from the list without affecting the other selectors that share the same rule set. Listing multiple selectors that share the same rule set is a technique that exists for efficiency. You don't have to paste the same rule set multiple times. 2. When selectors are "chained" with spaces between them, only the last selector in the chain is affected by the rule set. The previous items in the chain specify the ancestry of the last selector (so we can pinpoint it exactly) and any behavioral conditions (like :hover) that must be met. So the first rule set affects the image with ID="up" under all conditions. Separately, it affects the "over" image <i>when</i> the mouse hovers over its ancestor div "buttons." This rule set makes both those elements 100% opaque. The second rule set works affects the same elements in the opposite way. Together, the rule sets are a kind of on-off switch, as you've observed.

Thank you for the wonderful explanation! That helped me understand a lot. Do attributes like hover only work on classes and not IDs? For example, should I be able to change '.buttons:hover #over' to '.buttons #over:hover' and get the same result? I just tried it and it didn't work, so I'm assuming not...is that the case?

[jeffman]

:hover should work with just about anything, so in principle that CSS will work. In practice, it might depend on the size, display, position, z-index, and a few other properties of #over. In the case, the elements might be nested in such a way that only the .buttons container is "aware of" the hover behavior and the images themselves are not.

[thescientist]

OT OMG! DD is back.

Edited January 7, 2013 by thescientist

[eTianbun]

OT OMG! DD is back.

Cool!

[jeffman]

Let's not be hasty. I had a little extra time over the holiday and thought I'd catch up. Good to be here, though.