CODEWITHSUNDEEP
csscss-selectorssyntactic-sugar
Isaac Lubow
Isaac Lubow

Reputation: 3573

Is there a way to group CSS selectors for clarity?

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?

Upvotes: 7

Views: 1900

Answers (3)

Mark
Mark

Reputation: 5720

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.

Upvotes: 4

Sophie Alpert
Sophie Alpert

Reputation: 143114

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

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

  &:hover {
    // some more properties
  }
}

Upvotes: 5

Brad Christie
Brad Christie

Reputation: 101594

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).

Upvotes: 3

Related Questions