first

WEB制作

【CSS】:first-childや:last-childを使うと最初の要素や最後の要素だけ違う値を設定できて便利

HTMLの要素の中でも、あるClassの中にある最初の要素だけとか、最後の要素だけを別のmarginやpaddingにしたいということは、デザインを作り込んでいくとよくある。

特に、WordPressなどCMSのサイトだと、こういうテクニックを使う場面が多い。

LPとかの静的ページだとそんなにないかもしれないが、商品サムネイルを分類別に大量に載せてたりすると、個別に設定するより仕事が楽だったりする。

使い方は意外と簡単

CSSの割に「最初だけ」とか「最後だけ」みたいな条件分岐があったりと少しプログラミングっぽいけど、何のことはない、超簡単に設定できる。

上記みたいにcatという親要素のクラスがあるとする。

Aの子猫(最初の要素)だけ違う値にしたいなら、
.cat::first-child
と記述するだけだ。あとはいつものように値を書いていく。

同様にBの子猫(最後の要素)だけ変えたい場合は、
.cat::last-child
とする。

コロン(:)はCSS2の時代は1つで、今のCSS3では2つにするのがルール。古いブラウザに対応させるなら1つだけど、どっちでもいいと言えばどっちでもいい(適当)

疑似クラスを使うデメリット

そんなにないと思うけど、あくまでCSSで人間向けにデザインをいじっているだけなので、プログラム(検索エンジンとかAPIとか)からは元のHTMLが参照される。

疑似クラスは中~上級者向け(たぶん)なので、職場とかチームでいじるサイトだと、初心者には理解不能な場合があるので注意することくらい。

疑似クラスを使わない場合より、構造が少しややこしくなってメンテナンス性が下がるのは間違いない。

余談 疑似クラスという言い方が微妙

こういうのを疑似クラスというけど、言い方(呼び方)が微妙だなと感じる。似ているものに疑似要素っていうのもある。

英語だとpseudo-classというけど、pseudoの意味は「偽物の、まがいの、ペテンの」と何だか酷いキーワードばかりだし。臨機応変クラスとか、自動差し替えクラスみたいなイメージかな。