Is there a way to group CSS selectors for clarity?

Question

If I have a dozen CSS selectors, and want to assign :hover properties to all of them, I'm used to doing this:

selector, selector2, someOtherSelector, someSelector div {
    //some properties
}
selector:hover, selector2:hover, someOtherSelector:hover, someSelector div:hover {
    //some properties
}

Typing :hover four times seems redundant. Is there a way to group the selectors like

(selector, selector2, someOtherSelector, someSelector div):hover {
     //some properties
}

instead?

An interesting related question, btw: http://stackoverflow.com/questions/800779/why-cant-you-group-descendants-in-a-css-selector?rq=1 — Jason C, Jul 18 '16 at 19:29

score 5 · Answer 1 · answered Jan 25 '11 at 05:15

5

Not natively in CSS. By using something like SCSS, you can write:

selector, selector2, someOtherSelector, someSelector div {
  // some properties

  &:hover {
    // some more properties
  }
}

answered Jan 25 '11 at 05:15

Sophie Alpert

133,880
36
215
235

score 4 · Accepted Answer · answered Mar 25 '11 at 14:22

If they all share the same hover properties you could create a class that is shared for all that defines your :hover

So you'd get:

allSelectors, selector, selector2, someOtherSelector, someSelector div {
    //some properties
}
allSelectors:hover {
    //some properties
}

Re-usable classes makes for cleaner and less code.

score 3 · Answer 3 · answered Jan 25 '11 at 04:31

3

Sadly, there's not really any easier way of doing what you're trying to do, unfortunately. Unless you want to move the styles to jQuery or something (but that's not a good solution).

answered Jan 25 '11 at 04:31

Brad Christie

98,427
16
148
198

Is there a way to group CSS selectors for clarity?

3 Answers3