無料期間ありの定番動画サービス

WEB制作

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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

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の意味は「偽物の、まがいの、ペテンの」と何だか酷いキーワードばかりだし。臨機応変クラスとか、自動差し替えクラスみたいなイメージかな。

【PR】U-NEXT31日間無料トライアル

映画、ドラマ、アニメなどの動画が最新作から名作まで充実! スマホで1000ch以上の音楽放送も楽しめる!電子書籍も読める!

PC、スマートフォン、タブレット、テレビなどで今すぐ「観て」「聴いて」「読んで」楽しめる新しいエンターテイメントサービス!

無料体験はこちら

コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください