0

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*/
      }
}
mplungjan
  • 169,008
  • 28
  • 173
  • 236
O. Shekriladze
  • 1,346
  • 1
  • 19
  • 36
  • 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 G 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 G Sep 20 '19 at 08:33
  • For such conditions, please use sass/scss. – k.vincent Sep 20 '19 at 13:00

0 Answers0