「構造疑似クラス 応用編」と銘打っておりますが、だいたいが「nth-child」「first-child」「last-child」の組み合わせ応用です。
そう、これらはなんと組み合わせて使うことが可能なんです。
使い方は、いろいろとありますが、とりあえずおさらいを。
| :first-child | 最初の子要素に発動 |
|---|---|
| :last-child | 最後の子要素に発動 |
| :nth-child(4n) | 子要素が４の倍数の場合（4,8,12…番目）に発動 |
| :nth-child(4n+1) | 子要素が４の倍数+1の場合（1,5,9…番目）に発動 |
| :nth-child(n+5) | 子要素が５番目以上の場合（5,6,7,8,9…番目）に発動 |
| :nth-child(-n+5) | 子要素が５番目以下の場合（1,2,3,4,5番目まで）に発動 |
今までこの疑似クラスを漠然と（ほぼ単体で）使っていたと思いますが、これらを組み合わせて使うとどのようなことができるんでしょうか？
今回はfloatで要素を並べたサンプルで、組み合わせ例をご紹介します。
●●:nth-child(2n+1):last-child という、疑似クラス重ね業です。意味的には、「最後の子要素が奇数だった場合」に発動します。
●●:nth-child(3n+1):last-child（最後が1列目） と、●●:nth-child(3n+2):last-child（最後が2列目） という合わせ技で、こんなことも出来ます。
first-child で、最初の要素をこんな風にも出来ますよね。でも、そのままではアレなので…
nth-child(4n+2) は「4倍数の2列目」、nth-child(n+5) は「5番目以降」、となります。これで、きちんと列が乱れなくなりました。
nth-child(4n+2) と nth-child(4n+3) で解決です。