2017.07.24 Mon

無駄なclassとはおさらば!構造擬似クラスでコードを美しく!

みなさんこんにちは、米田です。

最近、引くほど睡眠時間が長いです。
いくら寝ても睡魔が襲っています。

そんな私の眠気が吹っ飛ぶほど便利な、構造擬似クラスをご紹介します。

構造擬似クラス

表やリスト、ナビゲーションなどを組む際、一番最初だけ、奇数番目だけ、何番目以外だけ、、、などにスタイルを当てたいときはありませんか?

もちろん、当てたい要素にクラス名をつければ解決します。
しかし、もし要素が増えたら?極端ですが、要素が100個あったらどうでしょう?

クラスをかえなければなりませんし、そもそも大量に記述するのがめんどくさい。
なにより、美しくない!!

そんなとき便利なのが構造擬似クラスです。
これを覚えておくだけで、要素を自由に指定することができます。

以下を使って、紹介していきます。

screencapture-file-users-genius-desktop-index-html-1500836781584

最初の要素

li:first-child{ background: #000; color: #fff; }

screencapture-file-users-genius-desktop-index-html-1500849094582

最後の要素

li:last-child { background: #000; color: #fff; }

screencapture-file-users-genius-desktop-index-html-1500849138840

a番目の要素

li:nth-child(2) { background: #000; color: #fff; }

screencapture-file-users-genius-desktop-index-html-1500849258360

最後からa番目の要素

li:nth-last-child(2) { background: #000; color: #fff; }

screencapture-file-users-genius-desktop-index-html-1500849230316

奇数番目の要素

li:nth-child(odd) { background: #000; color: #fff; }

screencapture-file-users-genius-desktop-index-html-1500855635844

偶数番目の要素

li:nth-child(even) { background: #000; color: #fff; }

screencapture-file-users-genius-desktop-index-html-1500849291603

aの倍数の要素

li:nth-child(2n) { background: #000; color: #fff; }

screencapture-file-users-genius-desktop-index-html-1500849291603

最初からa番目以降の要素

li:nth-child(n+3) { background: #000; color: #fff; }

screencapture-file-users-genius-desktop-index-html-1500849912587

最初からa番目以前の要素

li:nth-child(-n+3) { background: #000; color: #fff; }

screencapture-file-users-genius-desktop-index-html-1500849968630

最後からa番目以降の要素

li:nth-last-child(n+2) { background: #000; color: #fff; }

screencapture-file-users-genius-desktop-index-html-1500850089294

最後からa番目以前の要素

li:nth-last-child(-n+2) { background: #000; color: #fff; }

screencapture-file-users-genius-desktop-index-html-1500850108753

〜以外の要素

li:not(:last-child) { background: #000; color: #fff; }

※擬似クラス、擬似要素は複数繋げて指定することが可能です。

screencapture-file-users-genius-desktop-index-html-1500850089294

最後に

大規模なサイトになると少しでも記述量を減らしたいところですよね。
そんなときに構造擬似クラスを知らないとかなり損です!

今日紹介した他にも便利な技がまだまだあるかもなので、勉強してばりばりコーディングに励んでいきます!

WRITERこの記事を書いた人

米田

米田

大阪オフィスで、フロントエンドを担当しています。

大阪オフィスで、フロントエンドを担当しています。

FREE DOWNLOAD

顧客獲得に成功した24社の成功事例を1冊にまとめました。
顧客獲得にお困りの方も、そうでない方も、一度お読みいただくことをお勧めします。

MORE VIEW