- Coding Methodology
- 第76回 CSS3の疑似クラス:nth-child(n)を使った高さ揃え
第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)と同じ結果
横並びリストの数が可変の場合
レイアウトの崩れは、floatで横並びにした要素の高さがそれぞれ違い、それらの下に続く要素が本来想定している位置とは異なる位置へ回り込んでしまうために起こる現象です。（図1）
この現象をcssのみで解決する方法として、nth-child(n)を使用し区切りたい箇所でclear: both;を使用することで、要素の位置を整えます。（図2）
図1 横並びリストが崩れた例
図2 clear: both;を使用し、要素の位置を整える
htmlのマークアップとCSS記述
