Can I apply switching CSS to multiple elements?

Question

Generally, I can apply CSS specifications to multiple elements, eg:

.class1, .class2, #tag1, #tag2 {
margin: 10px;
color: black;
etc: etc; }

In my current js code project, I'm using body.className as a switch. If the className is set to 'viewing' certain things happen in different parts of the code, like:

.viewing #content {padding: 0}
.viewing #footer {display:none}
.viewing #nav {display:none}

My question is whether there is a way to combine things like .viewing #footer and viewing #nav -- something like:

.viewing #footer, #nav {display:none);

Answer 1

Not with CSS itself, you have to repeat the .viewing part:

.viewing #footer, .viewing #nav {
    /* Rules to apply to #footer and #nav when an
       ancestor element (like body) has .viewing
    */
}

Sass , Less , and such provide richer selection mechanisms that they then compile to pure CSS for delivery to the browser, you might look at them.

For instance, using Sass's SCSS, you could write it like this:

/* This is SCSS, not CSS */
.viewer {
    #footer, #nav {
        /* Rules to apply to #footer and #nav when an
           ancestor element (like body) has .viewing
        */
    }
}

Sass would preprocess that and output the CSS-compatible rule.

Answer 2

是的，但您必须这样做：

.viewing #footer, .viewing #nav {display:none);

Answer 3

You can do something like this:

tag#id.class 

or in your case .class#id For example:

.my-class#my-id, .my-class#other-id

Answer 4

They have drafted a module for nesting support in CSS, and since it is yet to be introduced, you can't do that with just CSS itself, as TJ already wrote.

You can't achieve that even with the CSS preprocessors like Sass and others, as they will ultimately be compiling CSS for you, which, as you already know now, doesn't support nesting except for the Media Queries .