78

How can I adapt the CSS selector below:

.myTableRow td:nth-child(?){
  background-color: #FFFFCC;
}

so it applies to td columns 2~4?

<table>
  <tr class="myTableRow">
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
    <td>column 4</td>
    <td>column 5</td>
  </tr>
</table>
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
QFDev
  • 8,668
  • 14
  • 58
  • 85

5 Answers5

135

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>
JLRishe
  • 99,490
  • 19
  • 131
  • 169
  • 6
    This solution is far cleaner, less error-prone, and more fit for purpose. The example helps visualize the solution. This should be the accepted answer. – OXiGEN Aug 24 '20 at 22:29
  • I know the question didn't include that, but what if there were more childs and we wanted to select the next 4 too? like a loop – Salatiel Feb 09 '21 at 01:36
  • @Salatiel If you want to select more items, just increase the second number. I'm not sure what you mean by "like a loop". – JLRishe Feb 09 '21 at 04:33
  • @JLRishe If for example you have an unknown quantity of items, is there a way to apply the style to every 3 items? something like 111 000 111 000 111... (indefinitely) – Salatiel Feb 09 '21 at 11:30
  • @Salatiel I can't think of a way to do that with a single selector, but you can do it with three selectors: `:nth-child(6n + 1), :nth-child(6n + 2), :nth-child(6n + 3)`. Example: https://codesandbox.io/s/epic-water-ddp3e?file=/src/styles.css – JLRishe Feb 10 '21 at 02:08
  • works great +1. Unfortunately it doesn't seem possible to also make this a repeating pattern, e.g., repeating 2-day weekend columns in a calendar. – Yogi Oct 10 '21 at 17:54
57

You won't be able to do this with a single :nth-child() — you'll need to chain at least one other such pseudo-class. For example, a combination of :nth-child() and :nth-last-child() (the n+2 bit means start counting forward and backward respectively from the 2nd child):

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

Alternatively, instead of making use of a formula, simply exclude :first-child and :last-child:

.myTableRow td:not(:first-child):not(:last-child){
background-color: #FFFFCC;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Great, that answers my question. I was just curious to know if this could be achieved with a single selector. But chaining it is. – QFDev Mar 26 '13 at 14:18
  • @BoltClock: Can you pls explain me how the chaining nth-child working ? I know the output, but not able to understand the way of processing. – albert Jegani Mar 01 '16 at 09:13
2

If you want to select elements 2 through 4, here's how you can do it:

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

Remind that the selector chain sequence should be from greatest to least. Safari has a bug that prevents this technique from working.

Sky Yip
  • 1,059
  • 12
  • 10
2

I've created a very simple code just so it's visually clear how to select columns or rows from other users' responses on this same page.

https://codepen.io/luis7lobo9b/pen/XWaNYXz

table with css

<!doctype html>
<html lang="pt-br">
<head>
    <!-- https://stackoverflow.com/questions/15639247/css-selector-for-nth-range -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes, shrink-to-fit=no">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        table{margin: 50px auto;}
        thead tr{background-color: gray; font-weight: 700;}
        td{border: 1px solid black;padding: 2px 8px;}
        table tr:nth-child(n+2):nth-child(-n+3){background-color:blue;}
        table td:nth-child(n+2):nth-child(-n+3){background-color:red;}
        table tr:nth-child(n+2):nth-child(-n+3) td:nth-child(n+2):nth-child(-n+3){background-color:purple;}
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>AAA</td>
                <td>BBB</td>
                <td>CCC</td>
                <td>DDD</td>
                <td>EEE</td>
                <td>FFF</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>111</td>
                <td>111</td>
                <td>111</td>
                <td>111</td>
                <td>111</td>
                <td>111</td>
            </tr>
            <tr>
                <td>222</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
            </tr>
            <tr>
                <td>333</td>
                <td>333</td>
                <td>333</td>
                <td>333</td>
                <td>333</td>
                <td>333</td>
            </tr>
            <tr>
                <td>444</td>
                <td>444</td>
                <td>444</td>
                <td>444</td>
                <td>444</td>
                <td>444</td>
            </tr>
            <tr>
                <td>555</td>
                <td>555</td>
                <td>555</td>
                <td>555</td>
                <td>555</td>
                <td>555</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
Luis Lobo
  • 489
  • 4
  • 7
-1

Try this :nth-child(even). This should solve the problem. Since elements 2 and 4 are your main targets, and both of them are even number.

Jokad
  • 1
  • 1
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 26 '22 at 04:38