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

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

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

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

構造擬似クラス

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

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

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

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

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

最初の要素

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

最後の要素

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

a番目の要素

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

最後からa番目の要素

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;
}

aの倍数の要素

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

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

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

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

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

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

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

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

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

〜以外の要素

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

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

最後に

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

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