CSS Nth-Match Doesn't Work

CSS nth-match doesn't work

CSS4 selectors don't have much browser support at the moment, see here.

You could use nth-of-type, a CSS3 selector that has greater browser support (see here):

p:nth-of-type(even) {text-decoration: underline;}

DEMO

Why is nth-child selector not working?

The nth-child selector counts siblings (i.e., elements having the same parent).

In your HTML structure, div.social-logo is always the first, last and only child of a. So nth-child has only one element to count.

However, there are multiple anchor elements, all of which are siblings (children of #social-links), so nth-child can target each one.

#social-links a:nth-child(1) div 
#social-links a:nth-child(2) div 
#social-links a:nth-child(3) div 
              .
              .
              .

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>

Select nth element for elements that do not share the same immediate parent

Since :nth-child and other similar selectors make matches based on sibling elements and CSS has no parent-wise selectors this isn't possible.

Less is simply a language that is compiled into CSS, it doesn't actually add any new features into CSS.

The easy alternative is to use Javascript.

nth-of-type doesn't work as expected

The nth-of-type pseudo selector is certainly working here as expected.

From MDN:

The :nth-of-type(an+b) CSS pseudo-class matches an element that has
an+b-1 siblings with the same element name before it in the document
tree

So

.test3:nth-of-type(3) {height: 100px;background: black;}

'works' because the div with class test3 also happens to be the third div within the container (div with class test)

however

.test3:nth-of-type(1) {height: 100px;background: black;}

doesn't select the test3 div because it isn't the first div in the container

Is nth-of-type work same as nth-child in this case?

In this case they are the same because all of the children in the container are divs.

---

In general, it could help to think about pseudo classes as a filter which matches only a subset of the matched selector (ie the part of the selector before the colon) when it is in the state that the pseudo class describes.

So for example .test:hover means: select all elements with class test - but only the ones which are being hovered.

Similarly here with nth-of-type: .test3:nth-of-type(3) means:

Select all elements with class test3, but only if it's the 3rd of that kind of element within it's container.

So take the following demo:

.test:nth-of-type(3) {  color:red;}

<div>  <ul>    <li class="test">li 1</li>    <li class="test">li 2</li>    <li class="test">li 3</li>    <li class="test">li 4</li>    <li class="test">li 5</li>  </ul>  <span class="test">span 1</span>  <span class="test">span 2</span>  <span class="test">span 3</span>  <span class="test">span 4</span>  <span class="test">span 5</span></div>

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(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.

---

Related Topics