58

以下のCSSセレクターを適応させるにはどうすればよいですか？

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

tdしたがって、列に適用されます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>
4

4 に答える 4

92

使用できるもう1つのアプローチは次のとおりです。

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

これは、最後から逆方向に数える必要がなく、範囲（2および）の数値が含まれているため、少し明確になります。4

また、アイテムの総数を考慮する必要がないため、もう少し堅牢です。

明確にするために：

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

例：

#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>

于 2015-01-21T07:17:35.787 に答える
49

単一でこれを行うことはできません:nth-child()—少なくとも1つの他のそのような疑似クラスをチェーンする必要があります。たとえば、との組み合わせ:nth-child()（:nth-last-child()ビットn+2は2番目の子からそれぞれ順方向と逆方向にカウントを開始することを意味します）：

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

または、数式を使用する代わりに、単に除外:first-childして:last-child：

.myTableRow td:not(:first-child):not(:last-child){
background-color: #FFFFCC;
}
于 2013-03-26T14:15:58.437 に答える
2

要素2から4を選択する場合は、次の方法で選択できます。

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

セレクターチェーンシーケンスは、最大から最小の順にする必要があることに注意してください。Safariには、この手法が機能しないというバグがあります。

于 2019-09-25T07:38:45.963 に答える
0

この同じページで他のユーザーの応答から列または行を選択する方法が視覚的に明確になるように、非常に単純なコードを作成しました。

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/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;}
    </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>
于 2021-10-22T11:45:58.820 に答える