How to select a range of elements in repeated pattern

by

This is a commonly-asked question, but I wanted to point out that the reason :nth-child(n+4):nth-child(-n+6) only matches one specific range of elements is that it only provides a single start point (n+4) and a single end point (-n+6). The only elements that can be greater than or equal to 4 and less than or equal to 6 are 4, 5 and 6, so it’s impossible to match elements outside of this range using the same selector. Adding more :nth-child() pseudos will only narrow down the matches.

The solution is to think of this in terms of columns, assuming there will always be exactly 3 columns (elements) per row. You have three columns, so you will need three separate :nth-child() pseudos. Elements 4 and 10 from the first column are 6 elements apart, so the argument to all of the :nth-child() pseudos needs to start with 6n.

The +b portion in the An+B expression can either be +4, +5 and +6, or 0, -1 and -2 — they will both match the same set of elements:

  • li:nth-child(6n+4), li:nth-child(6n+5), li:nth-child(6n+6)
  • li:nth-child(6n), li:nth-child(6n-1), li:nth-child(6n-2)

You cannot do this with a single :nth-child() pseudo-class, or a single compound selector consisting of any combination of :nth-child() pseudos, because the An+B notation simply doesn’t allow such expressions to be constructed that match elements in ranges as described.

More Related Contents:

  1. how do I make device specific selectors in css [closed]
  2. Is there a “previous sibling” selector?
  3. Which characters are valid in CSS class names/selectors?
  4. What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?
  5. CSS selector for first element with class
  6. What does the “+” (plus sign) CSS selector mean?
  7. Select every Nth element in CSS
  8. CSS selector for “foo that contains bar”? [duplicate]
  9. How to use JSF generated HTML element ID with colon “:” in CSS selectors?
  10. What does an asterisk (*) do in a CSS selector?
  11. CSS selector based on element text? [duplicate]
  12. Pure CSS checkbox image replacement
  13. How can I select an nth child without knowing the parent element?
  14. IE8 :nth-child and :before
  15. CSS selector to select first element of a given class
  16. How to select label for=”XYZ” in CSS?
  17. CSS: styled a checkbox to look like a button, is there a hover?
  18. In which direction do selector engines read, exactly?
  19. CSS Selector for
  20. What’s the difference between html[lang=”en”] and html:lang(en) in CSS?
  21. Can I colour backgrounds of selected items in HTML select options with CSS only?
  22. CSS3 combining selectors with OR instead of AND
  23. Why doesn’t this CSS :not() declaration filter down?
  24. Angular 2: How to style host element of the component?
  25. How to show the first N elements of a block and hide the others in css?
  26. What is the difference between :before and ::before?
  27. How to skip first child?
  28. How to select all elements whose ID starts and ends with specific strings?
  29. selector for nth nested elements
  30. Latest on CSS parent selector [duplicate]

Leave a Comment