What is the best way to apply various styles to a single CSS class?

Question

What is the best way to apply various styles to a single CSS class?

I'm in the process of implementing a dark mode feature on my website, and I want to do it without using any boilerplate code.

My plan is to create a .darkmode class in CSS, apply styles to it, and have JavaScript add the darkmode class to the <body> element when the user activates dark mode.

Is there a way to achieve this with CSS?

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

Essentially, I'm wondering how I can use CSS to change various elements on the page when the darkmode class is added to the <body>.

javascript html css

Answer 1

Answer №1

The snippet you shared is applicable for SCSS/LESS. For basic CSS, you can achieve the same result with:

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

It's necessary to always include .darkmode before each selector in plain CSS.

Answer 2

The snippet you shared is applicable for SCSS/LESS. For basic CSS, you can achieve the same result with:

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

It's necessary to always include .darkmode before each selector in plain CSS.

Answer 3

Answer №2

Imagine you have a CSS selector, for example

.mydiv .myanchor

To modify or add attributes, you can use

body.darkmode .mydiv .myanchor

This is a more specific selector, which means it will take precedence over the default styles.

Answer 4

Imagine you have a CSS selector, for example

.mydiv .myanchor

To modify or add attributes, you can use

body.darkmode .mydiv .myanchor

This is a more specific selector, which means it will take precedence over the default styles.

Answer 5

Answer №3

If you want to accomplish that using regular CSS, you'll need to utilize the CSS child selector;

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

The concept behind this is: "target the body element with the class darkmode and select its child .content/input"

When it comes to CSS selectors, when you have two elements separated by a space, it means you are targeting all instances of the second element within the first element; for example, div p would target all <p> tags inside all <div> tags.

Answer 6

If you want to accomplish that using regular CSS, you'll need to utilize the CSS child selector;

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

The concept behind this is: "target the body element with the class darkmode and select its child .content/input"

When it comes to CSS selectors, when you have two elements separated by a space, it means you are targeting all instances of the second element within the first element; for example, div p would target all <p> tags inside all <div> tags.

What is the best way to apply various styles to a single CSS class?

Answer №1

Answer №2

Answer №3

Similar questions

Achieving accurate character input during keyboard events

The method used in Redux does not function properly with my sessionStorage

JavaScript 12-hour Clock Displaying 24-hour Format with AM/PM Error

Receiving a 401 error code stating "unauthorized" when attempting to invoke a method using AJAX in .NET

Incorporate PNG files with pre-defined labels in a React element

Incorporating an image into a webpage's profile section through HTML

Trouble with mobile compatibility for .json file content population in HTML elements script

Unravel JSON using JavaScript on the web

Algorithm for combining animation with a click event in JS/jQuery

Combining element.scrollIntoView and scroll listener for smooth scrolling by using JavaScript

Getting the Height and Width of an Image during the upload process in a React application

Unable to delete React element by ID as it is undefined

What is the best way to use checkboxes in VueJS to apply filters on a loop and display specific results?

Searching for the precise error name being thrown in MySQL using Node.js

Having trouble with popovers after upgrading to bootstrap v4

The date time chart in high charts is not displaying the X-Axis width correctly

Utilizing Json data with Jquery for dynamically placing markers on Google Maps

Displaying FontIcon in a NativeScript alert box

Creating a two-column image gallery inside a div:

Balanced Columns with Background Extending Beyond Half of the Page