How to style and Array object in CSS

Question

how would I be able to take each array and style them differently in CSS NOT in JS ?

count = ['1','2','3','4'];
container = document.getElementById('itemsContainer');
  for(i = 0; i < count.length; i++){
    container.innerHTML+='<div class="items"></div>';
  }

var square= document.getElementsByClassName('items')[2];
square.style.backgroundColor='red';

.items{
  margin-top:10px;
  width:20px;
  height:20px;
  background:gold;

<div id="itemsContainer"></div>

what are the different CSS classes you want to apply ?

Abhinav Galodha
– Abhinav Galodha

2017-02-02 21:06:47 +00:00
Commented Feb 2, 2017 at 21:06 — Abhinav Galodha
– Abhinav Galodha, Commented Feb 2, 2017 at 21:06
use nth-child.....

Егор Кротенко
– Егор Кротенко

2017-02-02 21:06:56 +00:00
Commented Feb 2, 2017 at 21:06 — Егор Кротенко
– Егор Кротенко, Commented Feb 2, 2017 at 21:06

Scott Marcus · Accepted Answer · 2017-02-02 22:15:32Z

5

Using the nth-child() pseudo-class selector, we can differentiate between the elements without having any unique identifiers on the elements themselves. We don't even need an array.

container = document.getElementById('itemsContainer');

for(i = 0; i < 6; i++){
    container.innerHTML+='<div class="items"></div>';
}

.items{
  margin-top:10px;
  width:20px;
  height:20px;
  background:gray;
 }

.items:nth-child(1){ background:gold; }
.items:nth-child(2){ background:green; }
.items:nth-child(3){ background:red; }
.items:nth-child(4){ background:blue; }

<div id="itemsContainer"></div>

edited Feb 2, 2017 at 22:15

answered Feb 2, 2017 at 21:10

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael Coker · Accepted Answer · 2017-02-02 21:10:03Z

3

Change your JS to create a unique class for each item, then in your CSS, reference those classes

count = ['1','2','3','4'];
container = document.getElementById('itemsContainer');
  for(i = 0; i < count.length; i++){
    container.innerHTML+='<div class="items item' + i + '"></div>';
  }

.items{
  margin-top:10px;
  width:20px;
  height:20px;
  background:gold;}

.item1 {
  background: green;
}
.item2 {
  background: blue;  
}

<div id="itemsContainer"></div>

edited Feb 2, 2017 at 21:10

answered Feb 2, 2017 at 21:07

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

3 Comments

Michael Coker Over a year ago

@ЕгорКротенко that's one solution, this is another.

cord Over a year ago

Thanks both answers are get !! IS their away that I could add you guy to a friends list ? Im really new to JS / coding need some Friends lol

Mr Lister Over a year ago

This site doesn't do "friends". It's the quality of the individual answers that counts, not the persons who post them. That's only natural: if you like one answer by someone, that doesn't necessarily mean you'll like all answers by that person. So the identify of the poster is unimportant. With the exception of Jon Skeet of course.

Collectives™ on Stack Overflow

How to style and Array object in CSS

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related