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

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

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

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
<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」の位置の場合を指定しています。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
<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

業務に役立つPerl

Perlテキスト処理のエッセンス

PerlでポータブルなLinuxファイル管理入門

ITエンジニアの求人情報など

 ITエンジニアの求人情報・Webサービス・ソフトウェア・スクールなどの情報。