GORI Style土井です。

よくデザインなどで、リストの下に下線が欲しいけど最後のリストだけには下線は要らないなどといったデザインや、floatで横並びにした際に、最後のボックスには右マージンが要らない、などといったデザインがあります。

例えば、当サイトのトップページでも、お知らせやBlogの内容を掲載していますが、ボックス要素の縦幅は指定していませんので、通常のCSS指定だと時には段落ちしてしまいます。

新たにクラスを追加して、最後にだけそのクラスを追加すれば解決するのですが、なるべくクラスを追加したくない。もしくは、クラスが追加が出来ないなどと行った時に使えるテクニックです。

自分でもちょっとはまった擬似クラスについてメモしておこうと思います。

first-child

自身の親要素の最初の子要素にだけ反応します。

ulの中のリストの要素に指定すれば、liの最初の要素だけに反応します。

last-child

自身の親要素の最後の子要素にだけ反応します。
first-childの真逆です。

nth-child

◯◯番目の子要素にだけ反応します。その書き方は様々な方法があります。

:nth-child(◯)・・・◯番目の子要素に反応します。
:nth-child(◯n)・・・◯の倍数の子要素に反応します。
:nth-child(n+◯）・・・◯番目以降の子要素に反応します。
:nth-child(◯n+△)・・・◯の数の中の△の子要素に反応します。◯の数は繰り返されます。
:nth-child(-◯n+△)・・・◯の当りまでの間で△の子要素にだけ反応します。◯の数は繰り返されません。

◯番目にだけの要素に反応

一番分かりやすい使いかたです。
nth-child(◯)の◯に数字を入れるだけで、その親要素の子要素の◯番目にだけ反応するという方法です。