【CSS初心者向け】:first-childと:first-of-typeの使い分け【それぞれ便利】

コーディング
スポンサーリンク

:first-childの使い方

いちばん最初にある、指定した小要素に適用される

親要素の中の一番の上の要素です。

See the Pen
LYZPpqg
by nzm (@nzm)
on CodePen.


この場合、ulの最初の小要素のliにCSSが適用されます。

しかしulのすぐ下にpを追加するとliが最初の小要素でなくなるためfirst-childが適用されません。

See the Pen
QWELjPK
by nzm (@nzm)
on CodePen.

 

:first-of-typeの使い方

同一要素の最初の小要素に対して適用される

ul liのfirst-of-typeと指定しているので、親要素ulの中にある一番最初のliタグを見つけ出します。

この方法なら要素の上にpタグなど別の要素が入っていても大丈夫です。

See the Pen
bGebVXp
by nzm (@nzm)
on CodePen.

 

:last-child :last-of-typeで最後の要素に適用

使い方は先ほどの:first-childなどと同じで、これは最初ではなく最後の要素に適用されます。
実際はfirstよりlastの方が使う機会が多いかな?と思います。

 

:not()で特定の要素を対象外にする

:not()を使うと”一部の要素以外”にスタイルを適用させることができます。
これはかなり便利で非常によく使います。

例えば、このように縦に並んだリストがあるとして、リストの間に余白を付けるためにliにmargin-bottomで余白15pxを作りました。

全てのli要素に適用されてしまうので、最後の要素にもマージンができてしまいます。
最後の要素にはマージンボトムは必要ないので、これを:not()でここにはCSSが適用されないようにします。

See the Pen
eYzOJGj
by nzm (@nzm)
on CodePen.

コメント

タイトルとURLをコピーしました