css grouping selectors

Question

Without grouping we could do:

.footer_content a:link {
    color: #FFFFFF;
}
.footer_content a:visited {
    color: #FFFFFF;
}

With grouping:

.footer_content a:link, .footer_content a:visited {
    color: #FFFFFF;
}

is there a way to define the css selector to get rid of the extra .footer_content declaration that does the same thing? Something that would looking a bit like this:

.footer_content (a:link, a:visited) {
    color: #FFFFFF;
}

BoltClock · Accepted Answer · 2011-05-29 11:36:35Z

4

There currently is not a universally supported way of achieving that.

However, the experimental :any() selector would make that possible, if it gets implemented and standardised. It is not supported in any browser but the latest Firefox nightlies yet.

edited May 29, 2011 at 11:36

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

answered May 29, 2011 at 11:22

alex

492k205 gold badges890 silver badges991 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jits · Accepted Answer · 2011-05-29 11:53:07Z

2

You can achieve something kinda similar with Sass, which "compiles down" to CSS.

In Sass you would use nesting, like so:

.footer_content {
  a:link, a:visited {
    color: #FFFFFF;
  }
}

answered May 29, 2011 at 11:53

Jits

9,7571 gold badge39 silver badges28 bronze badges

1 Comment

chriscatfr Over a year ago

this is convenient, I wish it was standard css!

Collectives™ on Stack Overflow

css grouping selectors

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related