ここ最近、一気に暑くなってきましたね
蒸し暑い、日本の夏は本当に嫌いです。

何より大好きなフットサルが辛い！

さて、気候への文句はほどほどに
本日は備忘録としてCSSのセレクタのまとめです。

どうしてCSSセレクタの話なのかというと・・・
プロとして、この業界でやらせてもらうようになってからというもの
一番、口酸っぱく言われる事が「スピード」です。

もちろんクオリティを保ちつつのスピードが常に要求されますので、日々の作業の効率化というのが
非常に重要になります。

効率化と言ってもデザインとコーディングのどちらで一番、効率化できるかと言われれば
コーディングの方が効率化できる余地が多くあると思いますので

まずは効率化の最初のステップとして、長々と指定を書くのではなくCSSセレクタを上手く使ってソースコードを短くして
時間を削減しようという事です。

:first-child　（最初の要素にのみ適用）

最初の要素にのみ適用される。リストの下線を消したい時などに使っています。
これは、結構使います。

:last-child　（最後の要素にのみ適用）

先ほどとは逆に、最後の要素にのみ適用されます。リストの下線を消したい時などに使っています。
これも、結構使います。

:nth-of-type(n)　（【CSS3】n番目の要素に適用）

p:nth-of-type(2) {
  font-size:15px;
  color:#fff;
}

上記のように書くと、２番目の要素にのみ指定が適用されます。

nの部分は以下のように複数指定することもできるとのこと。
:nth-child(n)　･･･　n番目の要素に適用
:nth-child(odd)　･･･　奇数番目の要素に適用
:nth-child(2n+1)　･･･　奇数番目の要素に適用
:nth-child(even)　･･･　偶数番目の要素に適用
:nth-child(2n)　･･･　偶数番目の要素に適用
:nth-child(3n)　･･･　3,6,9,12…番目の要素に適用
:nth-child(3n+1)　･･･　1,4,7,10…番目の要素に適用

:nth-last-of-type(n)　（後ろからn番目の要素に適用）

p:nth-last-of-type(2) {
  font-size:15px;
  color:#fff;
}

上記のように記述することで、後ろから数えてn番目の要素にのみ
指定が適用されます。