CODEWITHSUNDEEP
htmlcsscss-selectors
Gabriel Ferraz
Gabriel Ferraz

Reputation: 73

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

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!

Upvotes: 3

Views: 17756

Answers (2)

Satwik Nadkarny
Satwik Nadkarny

Reputation: 5135

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!!!

Upvotes: 7

Joseph Marikle
Joseph Marikle

Reputation: 78520

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.

Upvotes: 4

Related Questions