How does :nth-child(n+4):nth-child(-n+8) select a range of elements?

Question

According to http://nthmaster.com/, when styling a range of elements by nth-child, we must do this:

:nth-child(n+4):nth-child(-n+8)

If we use only one :nth-child(), then we see that it styles all elements by that formula.

How does each of these two :nth-child() selectors cancel the other's influence on elements which are out of the range?

Answer 1

Combining simple selectors in this way simply means you're looking for elements that match all of the given conditions simultaneously. Combining pseudo-classes is no different from combining other kinds of simple selector, for example div.example or input[type="checkbox"]:checked.

So :nth-child(n+4):nth-child(-n+8) just means any element that is both :nth-child(n+4) and :nth-child(-n+8). This can only be a subset of the matches of either selector when used alone.

And that is how you get a range of elements.

How do you tell which elements will be matched? Simple: look at the B in each An+B expression:

• :nth-child(n+4) matches children starting from the 4th (inclusive)
• :nth-child(-n+8) matches children up to and including the 8th

How this all works is already illustrated in the website that you link to, but the preceding examples use :nth-child(n+6) and :nth-child(-n+9) separately, which may be a little confusing. Here's a more consistent example to illustrate how the two selectors combine (ignore the ::before/::after/content bits in the CSS — just focus on the output):

li::before {
  content: 'li';
}

li:nth-child(n+4)::before {
  content: 'li:nth-child(n+4)';
}

li:nth-child(-n+8)::after {
  content: ':nth-child(-n+8)';
}

<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>