html - CSS: コンテナ内で各子を個別にターゲットにしたい

Question

それぞれに別々の色を割り当てたい<td>。1 つの解決策はクラスを使用することですが、単純な CSS セレクターソリューションが存在する場合、HTML を混雑させたくありません。

HTML:

<tr>
  <td>Item 1</td>
  <td>Item 2</td>
  <td>Item 3</td>
  <td>Item 4</td>
</tr>

CSS:

/* item #1 */
{color: red}

/* item #2 */
{color: blue}

/* item #3 */
{color: green}

score 9 · Accepted Answer

CSS のnth-childセレクターを使用します。

td:nth-child(1) {
    color:blue;
}
td:nth-child(2) {
    color:red;
}
td:nth-child(3) {
    color:brown;
}
td:nth-child(4) {
    color:green;
}

score 5 · Accepted Answer

セレクターを使用してnth-child、特定の要素を指定できます (1 から数えます)。td:nth-child(1) { color: red; }

2 に答える 2