CODEWITHSUNDEEP
htmlcss
Jimmy
Jimmy

Reputation: 3880

Passing a variable to CSS via selector

Is it possible to convey to CSS a selector with a certain value that css then uses as a variable? e.g.

-- HTML --    
<div class-name="div-3"></div>

-- CSS --
.div-(x) {
  width: 100px * x;
}

Upvotes: 0

Views: 42

Answers (1)

tremby
tremby

Reputation: 10079

No.

But commonly a preprocessor such as Sass (and Less and Stylus, ...) is used to help with this sort of use case. In Sass you could loop through numbers x in a realistic range and generate the rulesets for each. It would output CSS which would explicitly state each rule (.div-1 {...}, .div-2 {...}, etc).

In future you will be able to do something similar to what you want with plain CSS, however, thanks to the attr function. You wouldn't be able to add the number to the class itself, I think, but could have it in a data-width attribute or similar. But at present the attr function is only helpful in the content property, which is not useful to you here.

Upvotes: 1

Related Questions