How to define multiple styles for one CSS class?

Question

I am implementing a dark mode on my site, and trying to do it in the cleanest way possible (no boiler plate code).

So I want to make .darkmode class in CSS, define styles with it, and when the user enables darkmode, javascript simply adds the darkmode class to the <body>.

How could I do something like this with CSS?

.darkmode {
    .content{
        background-color: black;
    }
    input{
        background-color: black;
    }
}

So my questions is, how can I make CSS change different elements on the page when adding this class to the <body>?

You can't do this syntactic sugar in CSS but you can in Sass or Less. The only way to do it in vanilla CSS would be .darkmode .content {...} .darkmode input {...} — Damon
– Damon, Commented Oct 4, 2017 at 20:02

SourceOverflow · Accepted Answer · 2017-10-04 20:03:12Z

4

The code that you posted would be valid SCSS/LESS. But in plain css you can simply do that by using

.darkmode .content { /* CSS */ }
.darkmode input { /* CSS */ }

So yes, you always have to specify the .darkmode in front of every selector.

answered Oct 4, 2017 at 20:03

SourceOverflow

2,0581 gold badge10 silver badges23 bronze badges

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

1 Comment

captincrunch Over a year ago

Awesome! Thanks for solution.

Lajos Arpad · Accepted Answer · 2017-10-04 20:03:47Z

0

Let's suppose you have a selector, like

.mydiv .myanchor

You can override/add attributes using

body.darkmode .mydiv .myanchor

is much more specific and therefore the rules will override the default rules.

answered Oct 4, 2017 at 20:03

Lajos Arpad

80.4k42 gold badges122 silver badges234 bronze badges

Comments

James Douglas · Accepted Answer · 2017-10-04 20:13:09Z

0

To achieve that in normal CSS you would have to use the CSS child selector;

body.darkmode .content {
  /* Put styles here */
}
body.darkmode input {
  /* Put styles here */
}

Basically the logic there says: "get the body element with the class darkmode and find it's child .content/input"

With CSS selectors, having two element selectors seporated by a space finds all of the second elements inside the first elements; div p would find all of the <p> tags inside all <div> tags.

edited Oct 4, 2017 at 20:13

answered Oct 4, 2017 at 20:06

James Douglas

3,4662 gold badges25 silver badges43 bronze badges

Collectives™ on Stack Overflow

How to define multiple styles for one CSS class?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related