How can I select a specific instance of an element inside a DIV using CSS? - html

Question

Let's say that I have the following code:
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
How would I go about selecting each instance inside of the "container" using CSS without naming it as a class or id or even using style="" on the element itself?
Thanks in advance!

Answer 1

Solution 1 : Immediate child selector
You will have to use the CSS selector >. This will target all the immediate child elements
Example :
.className > element {
}
See this below:
.container > div {
height: 40px;
width: 100%;
background-color: orange;
margin:10px;
}
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
Solution 2 : Nested children selector
You can also use it as follows:
.className element {
}
See this below :
.container div {
background-color: orange;
height: 30px;
width: 100%;
margin: 10px;
}
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
This is slightly different from the previous selector. The difference is that this will select all divs (including the nested children) within the immediate divs. To understand its effect, see below :
.container div {
background-color: orange;
height: 30px;
width: 100%;
margin: 10px;
}
<div class="container">
<div></div>
<div></div>
<div>
<div></div>
<div></div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
Solution 3 : Specific child selector (nth-child)
In case you want to select only a specific/specific set of immediate children, you can use the nth-child selector as follows:
.className > element:nth-child(n) {
}
See this below
.container > div {
background-color: orange;
height: 30px;
width: 100%;
margin: 10px;
}
.container > div:nth-child(3n+1) {
background-color: red;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Solution 4 : Nested Specific child selector (nth-child)
Lastly, you can combine the aforementioned selectors to target specific children and children of children as well as follows :
.className > element:nth-child(n) {
}
See this below:
.container div {
background-color: orange;
height: 30px;
width: 100%;
margin: 10px;
}
.container div:nth-child(3n+1) {
background-color: red;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
Hope this helps!!!

Answer 2

nth-of-type(n) or nth-child(n) will work.
See the MDN documentation
.container div:nth-of-type(2) {
/* selects the second one */
color: red;
}
<div class="container">
<div>test</div>
<div>test</div>
<div>test</div>
</div>
EDIT: oops! looks like both I and Satwik Nadkarny interpreted your question differently. It probably would be a good idea to use > even in my answer (making it .container > div:nth-of-type(2)) to avoid selecting nested divs within the first set.