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

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.

CodePudding user response：

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>

CodePudding user response：

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