-1

I am using a CSS code,

#flip1, #flip2, #flip3, #flip4 {
  color: red;
}

Is that anything like this to simplify the same,

#flip1-4 {
  color: red;
}

If yes, please guide me how to do it. Else, any other way exist like that also would be appreciated.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
bestway
  • 11
  • 3
  • 1
    no, why not add a common class to those elements? though, `[id^=flip]` may work, but you can't limit it to just 1,2,3 and 4 – Jaromanda X Oct 08 '22 at 07:10
  • Id is unique and in this case you should go with class, you can add classname `flip` to all the elements and call it in css by using `.flip{ color: red;}` – otejiri Oct 08 '22 at 07:12
  • I just shows that above CSS code as example. In my real case am using it for a script through id and also using 50+ id in same sequence of number in order at suffix. Just the whole CSS looks ugly and bunch. That's why wonder is that any wild card way excist to fulfill my need to make my code much better. – bestway Oct 08 '22 at 07:13
  • There is already another class used on those elements, So i can't combine the CSS of id with the class of same element will collapse my code. So, only using ID. Let me know if same possible with ID. I seen some wild card sequence to achieve the same but not understood. – bestway Oct 08 '22 at 07:16

2 Answers2

1

You can use selector here to as if there is any element that has flip in it then add color: red

  [id*="flip"] {
    color: red;
  }

or

  [id^="flip"] { // which means id starts with flip. More specific version
    color: red;
  }


[id*="flip"] {
  color: red;
}
<div id="flip1">flip1</div>
<div id="flip2">flip2</div>
<div id="flip3">flip3</div>
<div id="flip4">flip4</div>
<div id="flip5">flip5</div>
<div id="flip6">flip6</div>
<div id="flip7">flip7</div>
<div id="flip8">flip8</div>
<div id="flip9">flip9</div>
DecPK
  • 24,537
  • 6
  • 26
  • 42
0

You could also utilize SASS and compile the .scss file where you could use a loop as long as it is just about writing less code:

SASS (.scss):

@for $i from 1 through 50 {
  #flip#{$i} {
    color: red;
  }
}

which will compile to this CSS:

#flip1 {
  color: red;
}
#flip2 {
  color: red;
}
#flip3 {
  color: red;
}
#flip4 {
  color: red;
}

...

#flip50 {
  color: red;
}
tacoshy
  • 10,642
  • 5
  • 17
  • 34