CSS grouping :hover & :active

Question

When I want to define css selector with :hover and :active I have to do:

#mainPage #content div.group:hover, #mainPage #content div.group:active {}

As one can see it contians repeated #mainPage #content div.group and can get messy. Is there a way to group it somehow like:

#mainPage #content div.group:hover:active {}

@Ultra no he doesn't : http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better — Adjit, Jun 11 '14 at 19:05
see this http://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass — King King, Jun 11 '14 at 19:06
Seems like your styling is about to announce the cold war of rules specificity. — Fabrício Matté, Jun 11 '14 at 19:06
@Adjit in an article comparing two styling language I expected to see at least a line of code ): — Francisco Presencia, Jun 11 '14 at 19:09

score 1 · Answer 1 · answered Mar 04 '15 at 06:42

In pure CSS there is not much of a better way to handle both more succinctly without adding a class or ids.

You could consider a CSS pre-compiler (like LESS or SASS/SCSS).

In LESS or SCSS:

#mainPage #content div.group {

    &:hover, &:active {
        color: red;
    }

}

score 0 · Answer 2 · edited Mar 05 '15 at 08:35

0

I suggest add ID for the element has class group and write below code will reduce the effort:

#idname.group:hover, #idname.group:active{}

edited Mar 05 '15 at 08:35

arghtype

4,376
11
45
60

answered Mar 04 '15 at 06:36

Pavan

665
5
16

score 0 · Answer 3 · edited Jan 14 '16 at 20:19

Is there a reason why you're using #mainPage #content before div.group?
Generally, it's not necessary to add that much 'specificity' to your selectors - it's better to instead, have unique classes. So make sure that the class .group is only used for elements that you want to have the same styles.

If you do that, you should be able to style those elements just using

.group { styles here}

You might run into an issue now where if you try to override any of the styles you set like #mainPage #content, those will be more specific and so in effect 'stronger' than styles where you don't use the full list of parents. If possible, change all your styles not to include the parent elements - this is also worthwhile in case you ever want to move an object to a different part of the html!

It's also, in general, advisable not to use id's (#name) to attach css styles - if possible, just use classes. Unless you're doing javascript, you shouldn't have much need for id's.

Obviously there exceptions to the above, and for all I know you may have a perfectly good reason for doing things the way you have - in which case SASS (as suggested in a few other answers) is a good solution for you.

If not useful for you, I hope at least this answer might be useful for someone who might come along later - I've noticed that a lot of people newer to css don't realize how specificity of selectors works and end up making their styles a lot more complicated than necessary as a result! :)

"realise" isn't a spelling mistake, I'm English, "realize" is american ;) (doesn't matter, just amused me that it'd been changed!) — Roxy Walsh, Jan 15 '16 at 11:35

score 0 · Answer 4 · answered Oct 08 '21 at 22:43

Old question, but this should be relevant for somebody who needs this.

Pseudo-class released by the end of 2020

You can use :is() pseudo-class like so :

#mainPage #content div.group:is(:hover, :active) {

}

Here is a little snippet to picture it :

a:is(:hover, :focus) {
  color: red;
  outline: #5bc8ea dotted 4px;
  outline-offset: 4px;
  font-weight: 600;
}

<a href="#hover-or-focus-me">Hover/Focus me</a>

More informations about :is() pseudo class here: https://developer.mozilla.org/en-US/docs/Web/CSS/:is and here: https://css-tricks.com/almanac/selectors/i/is/.

Works with most of the popular browsers (incompatible with IE, Opera and Safari < 14) https://caniuse.com/css-matches-pseudo.

It surely is more often used to select elements than pseudo-classes like :hover or :focus but it will do the trick as I can't see any other solution for now.

pcproff · Answer 5 · 2014-06-11T19:17:04.693

-1

Why you use #mainPage #content? #content should be enough to find the div your looking for without the #mainPage.

Also id's are only allowed to be used once and not in multiple places like classes are. Id's are usually reserved for script assignments and not CSS. I would do

#content .group:hover{}
#content .group:active{}

edited Jun 11 '14 at 19:17

answered Jun 11 '14 at 19:09

pcproff

612
1
8
30

Honestly, I would get rid of #content altogether and just add the class to the element you want to add this behavior to. – pcproff Jun 11 '14 at 19:11

score -1 · Answer 6 · answered Oct 21 '22 at 20:41

-1

if i understood correctly, you want a group of elements to act a certain way? manipulate the parent class then.

.parent-class:hover {
    .child-class {
       …desired styles go here
     }
}

answered Oct 21 '22 at 20:41

Max Alexander Hanna

3,388
1
25
35

this is not valid css, but something in the line of LESS or SASS – Johannes Oct 21 '22 at 20:48
also note that the question is 8 years old – Johannes Oct 21 '22 at 20:51

CSS grouping :hover & :active

6 Answers6