Css grouping selectors

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 a css selector to get rid of the extra .footer_content statement that does the same? Something that would look something like this:

.footer_content (a:link, a:visited) {
    color: #FFFFFF;
}
+3
source share
2 answers

You can achieve something similar with Sass , which is "compiled" in CSS.

In Sass, you will use nesting, for example:

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

There is currently no universal way to achieve this.

However, an experimental :any()selector will make this possible if it is implemented and standardized. It is not supported in any browser, but in the latest nightly Firefox Firefox.

+4
source

All Articles