Is possible create a css class name with numbers "from-to"?-CodePudding

I need to have 3 classes as follow:

.class-4, .class-5, .class-6 {
    color: pink;
}

And it works perfectly. Let's say I need the same but for 100:

.class-4, .class-5, .... .class-100 {
    color: pink;
}

Is there anything similar to this or any other way to do this which I can use.

.class->3<101 {
    color: pink;
}

To get the same result without writing 97 times the class and the comma?

CodePudding user response：

If all elements will have the same property which is {color:pink} You can create only one class (lets call it .pink)

.pink {
    color: pink;
}

and then you can simply give your elements the .pink class.

CodePudding user response：

One of class attribute's main purpose is to define a shared style reference name. It is rather not a very good practice to want to reference multiple class references and let them share the same styling.

The best way to get around this is to have a common class attribute name YourClassName. This way, any element you want the styling applied to can have that class appended to its class attribute through element.classList.add(YourClassName) with JS. And, that would solve all the hussle of having to worry about putting multiple classe names and I cannot think of any 1 situation that would force you to declare each element class separated by commas provided that they are to receive the same styling.

CodePudding user response：

There is nothing in pure CSS which will do this, but you could use JavaScript to create a stylesheet for you which has all that tedious repetition created automatically.

In this snippet you say what the ends of the class ranges are and what styling is to be put in each of the ranges.

If there is a range which you don't want to alter then you still need to include it but make its styles string just an empty string.

The snippet runs through each of the ranges creating the relevant style sheet entries and puts them in a style element in the head element of the document.

A few fairly random divs are shown here just to test that we are hitting the right ranges.

const rangeEnds = [4, 20, 35, 41, 48, 100];
const styles = ['color: pink;', 'color: red; background-color: black;', 'color: green;', 'color: yellow;', 'color: blue;', 'color: black; background: pink;'];

let lastRangeEnd = 0;
const styleEl = document.createElement('style');
for (let i = 0; i < rangeEnds.length; i  ) {
  for (let j = lastRangeEnd   1; j < rangeEnds[i]; j  ) {
    styleEl.innerHTML  = '.class-'   j   ',';
  }
  styleEl.innerHTML  = '.class-'   rangeEnds[i]   '{'   styles[i]   '}';
  lastRangeEnd = rangeEnds[i];
}
document.querySelector('head').append(styleEl);

<!doctype html>
<html>

<head>
  <title>Classes</title>
</head>

<body>
  <div >ABCD</div>
  <div >ABCD</div>
  <div >ABCD</div>
  <div >ABCD</div>
  <div >ABCD</div>
  <div >ABCD</div>
  <div >ABCD</div>
</body>