Perl Web開発者のHTML・CSS入門

nth-child疑似クラス - CSS入門【CSS3対応】

nth-child疑似クラスは、親から見て特定の兄弟の位置を指定してスタイルを設定するための疑似的なクラスです。liタグと組み合わせてよく使われます。

偶数番目だけにスタイルを適用

偶数番目だけにスタイルを適用するには「:nth-child(2n)」とします。兄弟の位置が2の倍数の位置の場合を指定しています。

<style>
  .my_list1 li:nth-child(2n) {
    background:#ddd;
  }
</style>

<div class="my_list1">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

奇数番目だけにスタイルを適用

奇数番目だけにスタイルを適用するには「:nth-child(2n + 1)」とします。兄弟の位置が「2の倍数 + 1」の位置の場合を指定しています。

<style>
  .my_list2 li:nth-child(2n + 1) {
    background:#ddd;
  }
</style>

<div class="my_list2">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

nth-child疑似クラスの詳細

:nth-child()疑似クラス - MDN web docs