nth-child not targeting the correct element?

Question

.test:nth-child(1),
.test:nth-child(2),
.test:nth-child(3) {
  color: #0F0
}

<div class="test">
  <p>Test</p>
</div>
<div class="reuinIt">
  <p>Test</p>
</div>
<div class="test">
  <p>Test</p>
</div>
<div class="test">
  <p>Test</p>
</div>

https://jsfiddle.net/dkfj2xzj/13/ <- UPDATED with my jQuery code if it helps

Why is it not skipping the .ruinIt class and not targeting the third .test? I'm adding <div>s dynamically and when a <div> without the .checkDrop class is added I need to skip it.

Thanks

Answer 1

It's because the nth-child selector does not mean it's the nth of that specific class. It means that it's the nth sibling overall.

So the nth-child(2) refers to your .reuinIt class, however, it does not also have the .test class and therefore it does not receive any styling.

Your last .test class is the nth-child(4) however that has no styling rules applied.

If you'd like to see a working example, I've updated your fiddle here.

---

EXAMPLES

The :nth-child

The important thing to remember here is that the :nth-child selector specifically targets HTML elements based on their index/position inside their containers/parent elements.

Have a look at the example below and take note of how the corresponding commented :nth-child selector's index continues to increment regardless of the type of element it's targeting.

<div id="container">
    <h1>Heading 1</h1>   <!-- h1:nth-child(1) -->
    <p>Paragraph 1</p>   <!-- p:nth-child(2)  -->
    <p>Paragraph 2</p>   <!-- p:nth-child(3)  -->
    <h2>Heading 2</h2>   <!-- h2:nth-child(4) -->
    <p>Paragraph 3</p>   <!-- p:nth-child(5)  -->
</div>

---

The :nth-of-type

The cool thing about :nth-of-type is that it ignores all of the other elements that are not of the same type, i.e. if the element you are targeting is a <p>, it will ignore all of the surrounding "non-<p>" elements when calculating its index.

The below example will provide you with a basic understanding of the indexing rules that :nth-of-type follows:

<div id="container">
    <h1>Heading 1</h1>   <!-- h1:nth-of-type(1) -->
    <p>Paragraph 1</p>   <!-- p:nth-of-type(1)  -->
    <p>Paragraph 2</p>   <!-- p:nth-of-type(2)  -->
    <h2>Heading 2</h2>   <!-- h2:nth-of-type(1) -->
    <p>Paragraph 3</p>   <!-- p:nth-of-type(3)  -->
</div>

---

A little more complexity with :nth-of-type

It is however very important to remember that :nth-of-type bases it's indexing values on the HTML Element Type regardless of the CSS Class you are using to call the property.

Have a look at the below example:

<div id="container">
    <h1>Heading 1</h1>                    <!--        h1:nth-of-type(1) -->
    <p class="my-class">Paragraph 1</p>   <!-- .my-class:nth-of-type(1) -->
    <p>Paragraph 2</p>                    <!--         p:nth-of-type(2) -->
    <h2 class="my-class">Heading 2</h2>   <!-- .my-class:nth-of-type(1) -->
    <p class="my-class">Paragraph 3</p>   <!-- .my-class:nth-of-type(3) -->
    <h1 class="my-class">Heading 3</h1>   <!-- .my-class:nth-of-type(2) -->
</div>

This example is a little more complex, but it helps if you see CSS Declarations as a sort of filtering rule. For example, if create a CSS declaration by typing:

p:nth-of-type(2) {
  background-color: red;
}

I am essentially telling the browser 2 things:

1. Only <p> tags should be affected and,
2. Only if they are the second <p> tags amidst their siblings

The difficulty comes in when I write CSS that looks like this:

.my-class:nth-of-type(1) {
  background-color: red;
}

By not specifying an element type, my rule essentially reads with the following filter:

1. Only elements with the class my-class should be affected and,
2. Only if those elements are the first sibling of their type of elements.

If were to apply the above CSS to the HTML in the example (see fiddle for working example), we would get an output that looks like this:

In the output above, you'll see that both the first <h2> and the first <p> elements were affected regardless of whether or not their siblings had the my-class class name applied.

Answer 2

The code .test:nth-child(2) doesn't mean "the second element of the class test in its container". It means just "element that has a test class and is the second child of its container".

The behavior you expected can be expressed with CSS Selectors 4 as :nth-child(2 of .test). Unfortunately, this syntax is currently supported only in Safari.

Answer 3

Try below code for targeting nth-child:

You can first parent div for all child div.

.parent_div .test:nth-child(1) {
  color: red;
}
.parent_div .test:nth-child(3) {
  color: red;
}
.parent_div .test:nth-child(4) {
  color: red;
}

<div class="parent_div">
<div class="test">
   <p>Test</p>
</div>
<div class="reuinIt">
   <p>Test</p>
</div>
<div class="test">
   <p>Test</p>
</div>
<div class="test">
   <p>Test</p>
</div>
</div>