Question

I have a CSS3 rule that I want to make hide everything inside a given element except for any headers, until the user hovers over it. Which way would be a better choice? Keep in mind that, in this case, I’m not worried about backwards-compatibility with CSS2.1

Idea 1

---

SECTION FIGURE.collapsed:not(:hover) *:not(H1):not(H2):not(H3):not(H4):not(H5):not(H6){
    display:none;
}

Pro: does it all in one selector

Con: looks unstable and I feel like it’s a bit ambiguous

Idea 2

---

SECTION FIGURE.collapsed *{
    display:none;
}
SECTION FIGURE.collapsed:hover *{
    display:initial;
}


SECTION FIGURE.collapsed H1,
SECTION FIGURE.collapsed H2,
SECTION FIGURE.collapsed H3,
SECTION FIGURE.collapsed H4,
SECTION FIGURE.collapsed H5,
SECTION FIGURE.collapsed H6{
    display:block;
}

Pro: Classic CSS, easier to understand

Cons: Overrides previously set styles; doesn’t seem like display:initial; is valid CSS, though it works.

Answer 1

I think a combination of what you have would be best. You can eliminate the display: initial by doing the :not(:hover) but reset all the heading elements (which normally would have been display: block anyway.

Update: needed to get the selector specificity up by adding :not(:hover) to all. See fiddle. (Note: the h2.1 tag is still hidden because it is inside a div [this is what BoltClock noted in his discussion]).

SECTION FIGURE.collapsed:not(:hover) * {
    display:none;
} 

SECTION FIGURE.collapsed:not(:hover) H1,
SECTION FIGURE.collapsed:not(:hover) H2,
SECTION FIGURE.collapsed:not(:hover) H3,
SECTION FIGURE.collapsed:not(:hover) H4,
SECTION FIGURE.collapsed:not(:hover) H5,
SECTION FIGURE.collapsed:not(:hover) H6{
    display:block;
}