DOM: How to select a range of children? — First published in fullweb.io issue #58

dom-how-to-select-range-of-children.md

DOM: How to select a range of children?

Given the following HTML code:

<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ol>

You can select from the 2nd to the 5th <li> element with:

ol li:nth-child(n+2):nth-child(-n+5) {
    color: red;
}

The trick is in combining the 2 :nth-child() selectors and using a negative index in the second.