コーディングメソドロジー

第76回 CSS3の疑似クラス:nth-child(n)を使った高さ揃え

CSS3で定義された:nth-child()疑似クラスは、ある要素の隣接している子要素を最初から数えて、n 番目にあたる要素にスタイルを適用します。特にリストなどの同じ要素がたくさん続くHTMLに対してスタイルを適用するときにとても便利です。

nth-child(n)とは

CSS3で定義された:nth-child()疑似クラスは、ある要素の隣接している子要素を最初から数えて、n 番目にあたる要素にスタイルを適用します。特にリストなどの同じ要素がたくさん続くHTMLに対してスタイルを適用するときにとても便利です。

nth-child(n) 奇数・偶数・n番目など、要素を指定する時によく使うセレクタ

  • ■ n番目
    E:nth-child(1)
    整数の場合は、そのままn番目
  • ■奇数番目
    E:nth-child(2n+1)
    nには0から順に整数が入り計算されるので、奇数番目指定
    E:nth-child(odd)
    奇数番目指定、(2n+1)と同じ結果
  • ■偶数番目
    E:nth-child (2n)
    nには0から順に整数が入り計算されるので、偶数番目指定
    E:nth-child(even)
    偶数番目指定、(2n)と同じ結果

nth-child(n) 奇数・偶数・n番目など、要素を指定する時によく使うセレクタ

横並びリストの数が可変の場合

レイアウトの崩れは、floatで横並びにした要素の高さがそれぞれ違い、それらの下に続く要素が本来想定している位置とは異なる位置へ回り込んでしまうために起こる現象です。(図1)
この現象をcssのみで解決する方法として、nth-child(n)を使用し区切りたい箇所でclear: both;を使用することで、要素の位置を整えます。(図2)

図1 横並びリストが崩れた例

図1 横並びリストが崩れた例

図2 clear: both;を使用し、要素の位置を整える

図2 clear: both;を使用し、要素の位置を整える

htmlのマークアップとCSS記述

htmlのマークアップとCSS記述

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム