Guide to dynamically setting a CSS class property in HTML

Is there a way to dynamically set the value of a property for a CSS class without relying on a compiler or javascript?

:root {
--color-0 : red;
--color-1 : blue;
--color-3 : yellow;
}

.bg-color-[*] {
    background-color: var(--color-[*]);
}

I am looking for a method where I can pass in a numeric value in my HTML to select the correct variable.

<div class="bg-color-1">This background should be red</div>
<div class="bg-color-2">This background should be blue</div>
<div class="bg-color-3">This background should be yellow</div>
csscss-selectorscss-variables

Answer №1

It's unfortunate that CSS lacks the capability to incorporate logic directly into its stylesheet. One possible solution is to use a CSS preprocessor, such as SASS, that offers more advanced features like nesting and logic functionalities.

SASS can help you achieve tasks that CSS alone cannot handle. The preprocessor will then compile your SASS code into standard CSS for browser interpretation.

Answer №2

When working with SCSS, you have the ability to achieve the following:

@for $i from 1 through 3 {
    .bg-color-#{$i} {
        background-color: var(--color-#{$i});
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with functionality of drop-down menu

For some reason, when I hover over the menu item "support," the text doesn't show up in the drop-down menu. I've double-checked my CSS multiple times, but I can't seem to pinpoint where the issue lies. HTML Code <body> <div class= ...

cssdrop-down-menu

One-of-a-kind Design: Linear Gradient Background Image

Can you help me with Linear Gradient? Is it feasible to incorporate an actual image instead of just displaying a color like #000000 or #ffffff? background-image: -webkit-linear-gradient(30deg, #000000 50%, #ffffff 50%); In the scenario mentioned above ( ...

htmlcss

What is the best way to generate two <div> elements, with one of them being centrally fixed?

When it comes to CSS, I must admit that it's not my strong suit. My current challenge is to create two boxes or divs where one remains fixed in the center of the page, while the other adapts and positions itself right next to the first one. Essentiall ...

cssreactjsflexboxmaterial-uistyled-components

Generate an additional CSS animation to display before the next page is loaded

When loading a page, I am implementing CSS transitions to display animated lines. To activate these lines, I am utilizing a jQuery script to change the class on the line elements. I am looking to reverse the CSS transitions when transitioning to the next ...

javascriptjqueryhtmlcss

What causes the issue when attempting to import multiple CSS files in a Vue.js project using @import more than once?

Currently, I am working on a project that involves one main component and several child components. These components require custom CSS files as well as additional vendor CSS files. A challenge I encountered is that I cannot use the @import "path/to/css/fi ...

javascriptcssvue.js

Modify the background color of checkboxes without including any text labels

I am looking to customize my checkbox. The common method I usually see for customization is as follows: input[type=checkbox] { display: none; } .my_label { display: inline-block; cursor: pointer; font-size: 13px; margin-right: 15px; ...

javascriptjqueryhtmlcsscheckbox

What is the process for encoding images in HTML code?

Is there a method to embed a background image directly in the HTML code? For instance: background-image: url(data:image/gif;base64,XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX); If I have an image file, can I encode its data and t ...

csshtml

css - design your layout with floating div elements

I used to design layouts using tables, but now I'm trying it out with divs. However, I'm still struggling to get the layout right. It's not as straightforward as using tables. For instance, my code looks like this: var html_output = "< ...

jquerycsshtml

What is the best way to switch the direction of the arrows based on the sorting order?

Is there a way to dynamically change the direction of arrows based on sorting, similar to the example shown here? sortingPipe.ts: import { SprBitType } from '../spr-bit-type/sprBitType'; import { Pipe, PipeTransform } from '@angular/core& ...

htmlcssangulartypescript

Enhance the numerical value displayed in jQuery UI tooltips

I have folders with tooltips displaying text like '0 entries' or '5 entries' and so on. I am looking for a way to dynamically update this tooltip number every time an item is added to the folder. The initial count may not always start a ...

javascriptjqueryhtmlcsstooltip

Experimenting with animating a snackbar in Svelte by incorporating distinct animations for its entrance and exit effects

My current objective is to create a snackbar component with a Material-esque design that will emerge from the bottom of the screen and blur out once dismissed. Here is my current implementation: <script lang="ts"> import '../css/sn ...

javascriptcsstypescriptsveltesveltekit

Utilizing XHTML text input with CSS text-transform and JavaScript features

Similar Question: How to Convert a String into Pascal Case (UpperCamelCase) in JavaScript I am working on some basic tasks here, so please be patient. My current task involves using an XHTML text input to collect a user's name. I then display an ...

javascriptcssxhtmltextalert

Firefox allows for the HTML to render even if CSS links are included in the head section

I've been struggling with a persistent issue for some time now. From what I've gathered, including <link> tags in the <head> of a Firefox page is supposed to halt rendering until those resources are fully loaded. To test this, I inser ...

htmlcssfirefoxdrawing

Having difficulty making Skrollr compatible with BootStrap 3 single page wonder

I am completely new to JavaScript, which is why I decided to use Skrollr. However, I have been facing some challenges in getting Skrollr to work properly on my webpage. I added the following code at the end of my page: <script type="text/javascript" sr ...

javascriptcsstwitter-bootstrapskrollr

List of elements inside an HTML box

In my current HTML project, I am trying to include a box on a webpage that contains a scrollable list of elements. I want the content inside the box to scroll independently without affecting the rest of the page. Is there a way to achieve this? ...

htmlcss

Change the order of the table data elements using the nth-child CSS selector

I need the second td in my table to appear on top of the first one when I resize the screen. @media screen and (min-width: 200px) and (max-width: 872px) { td :nth-child(1) {display:bottom} td :nth-child(2) {display:top} } <table border="0" cell ...

htmlcss

Customizing Dropdown Menus with Bootstrap

Is there a way to make the select element appear as a list, similar to this image: https://i.sstatic.net/1IB8T.jpg Apologies, I'm still a beginner at this. Thank you in advance. ...

cssbootstrap-4

Fixing inconsistent font sizes across various browsers

During the development of my website, I couldn't help but notice a significant variance in font sizes between Internet Explorer and other browsers. Here's an example of what my page looks like: I intended for it to resemble the first and second ...

htmlcss

Styling elements with CSS to achieve proper positioning

I am in search of a way to align rows utilizing the style property. The following HTML code is being transformed using XSL: <span style="white-space: pre; font-size: 8pt; font-family: Lucida console, Courier ">&lt;40 : item1</span>&l ...

htmlcss

What is the best way to create a paginator class that can navigate one page at a time using HTML and CSS?

I recently found the infusion theme online and you can check out some examples of it here There is also a live preview available here However, I am encountering difficulties in getting the paginator class to move. It seems like when one of those elements ...

javascriptjqueryhtmlcsspagination