dynamic class div has two set of css

Question

I have the div generated dynamically

<div class="test-1">1</div>
<div class="test-2">2</div>
<div class="test-3">3</div>
 ...
<div class="test-100">100</div>
<div class="test-101">101</div>

I want to display class test-1 to test-50 in red color and test-51 and above should be in green.Is it possible to handle with constraint css or I may need to use in jquery css

You can have two classes if that IMHO poorly chosen numerical is a challenge but used for other things like a class list with "test-group-a test-1" then later "test-group-b test-51" and thus simplify the entire thing. This really is what CSS is about in many cases, "stuff the same gets the same class" — Mark Schultheiss, Sep 25 '19 at 12:15

score 4 · Answer 1 · answered Sep 25 '19 at 12:10

If you able to modify html generation, better solution will be to add different classes to first 50 and other 50 elements.

<div class="test-1 red">1</div>
<div class="test-2 red">2</div>
...
<div class="test-51 green">51</div>
...
<div class="test-100 green">100</div>

Other solutions have heavy downsides.

While you can manually write

.test-1,
.test-2,
...
.test-50 {
  color: green;
}

It probably not what you want.

Such CSS can be automated with preprocessor or postprocessor if you use some. For example, with SASS

@for $i from 1 through 50 {
  .test-#{i} {
    color: green;
  }
}

But it leads to very unoptimized CSS.

You also can add new classes ("green" and "red") or apply style directly with jQuery, but it will be applied after JS execution.

score 1 · Accepted Answer · answered Sep 25 '19 at 12:00

There is NO nth-of-class selector. So you cannot use that, but if all the elements are in order and all are siblings, you could something with :nth-child(n+x)

You set up a default color for the elements 1-50 ( red ) and then change the color for the ones from 51 and above. Use :nth-child(n + 51)

div {
  color: red;
}

div:nth-child(n+4) {
  color: green;
}

<div class="test-1">1</div>
<div class="test-2">2</div>
<div class="test-3">3</div>
<div class="test-4">4</div>
<div class="test-5">5</div>
<div class="test-5">6</div>

OR IF you know the class of the element at position 51, you could use ~ general sibling selector. Which selects all the siblings of the element that are after it ( down the DOM tree )

div {
  color: red;
}

div.test-3 ~ div {
  color: green;
}

<div class="test-1">1</div>
<div class="test-2">2</div>
<div class="test-3">3</div>
<div class="test-4">4</div>
<div class="test-5">5</div>
<div class="test-6">6</div>

score 1 · Answer 3 · answered Sep 25 '19 at 12:03

1

You can add a second class to classes test-1 to test-50 and for classes test-51 to above like:

.redColor{
    background-color: red;
}

.greenColor{
    background-color: green;
}

<div class="test-1 redColor">1</div>
<div class="test-2 redColor">2</div>
<div class="test-3 redColor">3</div>
 ...
<div class="test-100 greenColor">100</div>
<div class="test-101 greenColor">101</div>

Or you can use css preprocessors like sass

answered Sep 25 '19 at 12:03

Akshay Bande

2,491
2
12
29

1

or perhaps "red-color" since that is the pattern in use already for class names. – Mark Schultheiss Sep 25 '19 at 12:18
yes, you can use `red-color`, `redColor` or `r-color` class name can be anything. – Akshay Bande Sep 25 '19 at 12:20
2

@MarkSchultheiss was referring to using`name-name` instead of `nameName` it's a naming convention to use `kebab-case` for HTML attributes. `camelCase` should be used for naming variables and functions. – Mihai T Sep 25 '19 at 12:55
Okay got it. Thanks :) – Akshay Bande Sep 25 '19 at 15:13

score 0 · Answer 4 · answered Sep 25 '19 at 12:04

Instead of giving class names as test-1, test-2 ...., you should give two classnames for two set of divs i.e. for =<50 and >50 depending upon the index of the loop.

e.g. considering your code to be dynamically creating divs using map, the code with just 10 divs can look like:

`

[1,2,3,4,5,6,7,8,9,10].map(index => (
  <div className={ index > 5 ? 'green' : 'red' }>{index}</div>
))

`

dynamic class div has two set of css

4 Answers4