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

米田

7年 ago

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

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

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

目次／このページでわかること

構造擬似クラス

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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