How to simplify css id name if its in a sequence?

October 8, 2022

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.

>Solution :

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;
  }

  [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>