Select Items Using Negative nth-child

Use negative nth-child in CSS to select items 1 through n.

  1. li {
  2. display: none;
  3. }
  4. /* select items 1 through 3 and display them */
  5. li:nth-child(-n+3) {
  6. display: block;
  7. }

Or, since you’ve already learned a little about using :not(), try:

  1. /* select all items except the first 3 and display them */
  2. li:not(:nth-child(-n+3)) {
  3. display: block;
  4. }

Demo