Nth-Child Doesn't Respond to Class

nth-child doesn't respond to class

There's no way to filter by class in CSS because there's no :nth-of-class() selector. One way around this is to put your two different kinds of divs into their own groups, then select based on those groups. For example:

<div class="orange">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="red">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

With this selector:

div.red div:nth-child(2) {
    background: red;
}

Regarding the last bit of your question:

And I don't understand why nth-child() and nth-of-type() respond differently, since there are only eight tags of the same type in the document.

For the code you give there shouldn't be any difference. I tested it, and the two pseudo-classes work as expected. But, in general:

:nth-child() operates on an entire level of siblings without regard for any other simple selectors. Then if the nth child is not among what's matched by the simple selectors, nothing is matched.

:nth-of-type() operates on a level of siblings of the given type without regard for other simple selectors. Then if the nth element occurring of that type is not among what's matched by the simple selectors, nothing is matched.

nth-child doesn't respond to class selector

Try the :nth-of-type() pseudo-selector instead:

#content .foo:nth-of-type(1) { margin-top: 0; }

Note that :nth-of-type() counts the elements with the same name. So .foo:nth-of-type(1) will not select the first element with the class foo but any first element that is the first in the list of elements grouped by the same name. If you have some document like this:

<div>
    <i class="foo">1</i><i>x</i><i class="foo">2</i>
    <b class="foo">3</b><b>x</b><b class="foo">4</b>
</div>

.foo:nth-of-type(1) will select the elements <i class="foo">1</i> and <b class="foo">3</b> as both are the first of its own type.

nth-child not targeting the correct element?

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.

:nth-child(2) doesn't work. :nth-child(1) and :nth-child(3) do

Here is an explanation of what went wrong. It was the result of your selector. The oddity in the way it played out was due to your html structure, and using querySelector.

div.rules :nth-child()

This will first target the <div class="rules"> element. Then, it will look for all elements which are the nth-child inside of that div because of the space between the two selectors. Following that, using querySelector will select the first element of the matched set.

This is why you ended up getting the first <div> with :nth-child(1), because it in fact matched every single nth-child(1), but taking the first result was coincidentally the element you expected.

However, :nth-child(2) matching every second child element was far too wide of a net, and ended up getting the second child in the first div, and since that was the first result, that was where the red background showed up.

The final curiosity of :nth-child(3) seeming to actually hit the proper element was only because there is only one third child element in all of that html, and it was the one which you expected, although as explained for reasons other than assumed.

CSS nth-child doesn't work

It should be:

ul li:nth-of-type(3) a {
    color: #111111;
}

You want the a tag inside the third li.

CSS nth-child is not working based on my expectation

This is because the first service-box is actually the second child of its parent, center-text being the first. Remove center-text and use .service-box:nth-child(3).

.service-box:nth-child(3) {  background-color: red;}

<div class="our-services">  <div class="service-box">    <h3 class="center-text">Service 1</h3>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>  </div>  <div class="service-box">    <h3 class="center-text">Service 2</h3>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>  </div>  <div class="service-box">    <h3 class="center-text">Service 3</h3>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>  </div></div>

.postPrevWrap:nth-child(odd)

.postPrev:nth-child(odd)