CSS Selector for nth range?
CssCss SelectorsCss Problem Overview
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>
Css Solutions
Solution 1 - Css
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>
Solution 2 - Css
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;
}
Solution 3 - Css
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.
Solution 4 - Css
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
<!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/[email protected]/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;}
</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>