CSS Selector for nth range?

by

One more approach you could use is:

.myTableRow td:nth-child(n+2):nth-child(-n+4){
    background-color: #FFFFCC;
}

This is a little clearer because it includes the numbers in your range (2 and 4) instead of having to count backwards from the end.

It’s also a bit more robust because you don’t have to consider the total number of items there are.

For clarification:

:nth-child(n+X)     /* all children from the Xth position onward */
:nth-child(-n+x)    /* all children up to the Xth position       */

Example:

#nn div {
    width: 40px;
    height: 40px;
    background-color: black;
    display: inline-block;
    margin-right: 10px;
}

#nn div:nth-child(n+3):nth-child(-n+6) {
    background-color: blue;
}
<div id="nn">
    <div></div>    
    <div></div>    
    <div></div>    
    <div></div>    
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

More Related Contents:

  1. Is there a CSS parent selector?
  2. Complex CSS selector for parent of active child [duplicate]
  3. Select every Nth element in CSS
  4. CSS3 selector :first-of-type with class name?
  5. CSS Selector that applies to elements with two classes
  6. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  7. CSS ‘>’ selector; what is it? [duplicate]
  8. Select element based on multiple classes
  9. CSS selector based on element text? [duplicate]
  10. Pure CSS checkbox image replacement
  11. Handling a colon in an element ID in a CSS selector [duplicate]
  12. CSS selector for attribute names based on a wildcard
  13. IE8 :nth-child and :before
  14. CSS selector to select first element of a given class
  15. Invalid CSS selector causes rule to be dropped: What is the rationale?
  16. How to select the first, second, or third element with a given class name?
  17. Can I use variables for selectors?
  18. Combine :after with :hover
  19. What does the dot mean in CSS?
  20. CSS: styled a checkbox to look like a button, is there a hover?
  21. :active css selector not working for IE8 and IE9
  22. What is this CSS selector? [class*=”span”]
  23. Is there any pros and cons if i use always CSS Class instead CSS ID for everything?
  24. Multiple descendant children selector with css [duplicate]
  25. Targeting position:sticky elements that are currently in a ‘stuck’ state
  26. Select odd even child excluding the hidden child
  27. Is there an opposite CSS pseudo-class to :hover?
  28. Comma in CSS, multiple selectors using the same CSS
  29. CSS class repetition to increase specificity
  30. select second child

Leave a Comment