Select one div after another css selectors [closed] - css

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I have been trying to do this for a while and feel it should be fairly simple:
<div id = "container">
<div id = "item1" class = "item"> </div>
<div id = "item2" class = "item"> </div>
<div id = "item3" class = "item"> </div>
</div>
How can I select each item one after another and assign each a different background (without using ids)?
What I am trying to achieve:
#item1 {
background: red;
}
#item2 {
background: blue;
}
#item3 {
background: yellow;
}
<div id="container">
<div id="item1" class="item"> </div>
<div id="item2" class="item"> </div>
<div id="item3" class="item"> </div>
</div>
But isn't there a way to select each element in the #container div one by one, regardless of it's id value? By doing something such as the following :
.container:nth-child(1){ /*select first child of .conainter (#item1) ?*/
background: red;
}
or
.item:nth-of-type(2){ /*select second element of type .item (#item2) */
background: blue;
}

Answer 1

If you are trying to do this with only CSS:
.item:nth-of-type(1) { background: #fff}
.item:nth-of-type(2) { background: #000}
.item:nth-of-type(3) { background: #abc}
If you want to grab these after the fact using JS and/or jQuery:
jQuery(".item").each(function(i, el) {
if(i == 0) {
el.style.backgroundColor = "black";
} else {
el.style.backgroundColor = "red";
}
})
i here would be the index of your .item elements so you can target which one you need by this index (hence the conditional)
Also note that you need to set a height on the .item elements or add some content if you want to see the background color change. The height by default is 0

Answer 2

There are several ways to achieve this in CSS and JS. Below, is my variation I would normally use on client websites to achieve this background variation you are attempting to achieve:
#container div {width: 200px; height: 200px;}
#container div:first-child {background-color: red;}
#container div:nth-child(2) {background-color: green;}
#container div:last-child {background-color: blue;}
Im using first child and last childs on the first and last elements inside #container and then for the one in the middle i just tell the browser to find the second div inside #container.
Here is my HTML so my explination and CSS makes sense:
<div id = "container">
<div>ITS RED! </div>
<div>ITS GREEN! </div>
<div>ITS BLUE! </div>
</div>
Feel free to edit and play around with my code in a jsfiddle enviroment: https://jsfiddle.net/x9eouw7z/

Answer 3

For a static page you can use the :nth-child() selector like this:
https://jsfiddle.net/DIRTY_SMITH/6brcg9p7/3/
.item:nth-child(1) {
background: blue;
}
.item:nth-child(2) {
background: red;
}
.item:nth-child(3) {
background: green;
}