Attribute if block inside css file

Asked Sep 20 '19 at 07:52

Active Sep 20 '19 at 08:00

Viewed 59 times

Imagine I have 2 classes: class1 and class2. Now I want to apply styles on these classes depending on whether these classes have some attribute or not.

Here is my code :

.class1[someattribute] {
   /*styles*/
}

.class2[someattribute] {
   /*styles*/
}

But if I have 10 classes I should use [someattribute] 10 times. Is it somehow possible to put all this class1 and class2 style inside some kind of if block? like this:

[someattribute] {
      .class1 {
          /*styles*/
      }

      .class2 {
         /*styles*/
      }
}

edited Sep 20 '19 at 08:00

mplungjan

155,085
27
166
222

asked Sep 20 '19 at 07:52

O. Shekriladze

1,103
12
32

1

Normally in CSS there is no definite `if` statement but if your really need to create a condition for your style I recommend using `Sass` or just a `javascript` – Francis ask question Sep 20 '19 at 07:55
You can't do that with normal `CSS`, but take a look here: https://stackoverflow.com/a/2446829/11084113 – mindmaster Sep 20 '19 at 07:57
@Francis ask question: Selectors *are* the conditional statements in CSS. – BoltClock Sep 20 '19 at 08:12
You may find [CSS custom properties/variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) useful in your case, [check this fiddle](https://jsfiddle.net/afvLj3xq/). – skobaljic Sep 20 '19 at 08:25
@BoltClock what I mean is `definite if` where you put some condition – Francis ask question Sep 20 '19 at 08:33
For such conditions, please use sass/scss. – k.vincent Sep 20 '19 at 13:00

Attribute if block inside css file

0 Answers0