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

Last active August 16, 2016 02:58

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/nepsilon/d3ba6b5dda4225629819358878628d9e.js"></script>
Save nepsilon/d3ba6b5dda4225629819358878628d9e to your computer and use it in GitHub Desktop.

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

Raw

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.