【CSS】「セレクターリスト」について解説！【注意点についても】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの「セレクターリスト」について解説します。

「セレクターリスト」って何？？

このような方が対象です。

また、下の動画でも「セレクターリスト」について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

そもそもCSSの「セレクター」とは何か？

CSSの「セレクター」とは「どの要素にスタイルを当てるか？」を指定する箇所のことを指します。

ふむふむ。

「セレクターリスト」とは何か？

「セレクターリスト」とは、同じスタイルを当てる「複数のセレクター」を「１まとめにするセレクターの書き方」のことです。

実際に使ってみる！

h1,
h2,
h3 {
    font-weight: bold;
}

セレクター同士を「,」カンマ区切りで書いてあげればOKです！

読みやすいので「,」カンマを打った後は、改行することが多いです。

上の例だと、「h1」「h2」「h3」の全てに「font-weight: bold;」が適用されます。

これは便利だね！

「,」カンマを打った後は、改行するべし！

h1, h2[title], h3.hoge {
    font-weight: bold;
}

h1,
h3[title],
h3.hoge {
    font-weight: bold;
}

「,」カンマを打った後は改行した方がコードが読みやすいと思います。

また、「Google社」が公開している「スタイルガイド」を見てみると、「,」の後は改行することを推奨しています。

https://google.github.io/styleguide/htmlcssguide.html#Selector_and_Declaration_Separation

スタイルガイドというのは「こーゆールールでコーディングしようね！」というお約束のようなものです。

複数人でコードを書く際には、共通のルールを用意すると、コードが書きやすくなるし読みやすくなるので便利です。

ルールを作る際には、メガテックなどのルールを参考にしてみると良さそうだね！

「セレクターリスト」を使うメリット！

「セレクターリスト」を使うメリットについても記述しておこうと思います！

これらがあるのかな、と思います。

コードが読みやすくなる

セレクターリストを使うことで、同じスタイルが当たる箇所をまとることができるので「この要素とこの要素には同じスタイルが当たるんだな」ということが、コードを見比べなくても分かるので、コードが読みやすくなると思います。これは大きなメリットです。

自分一人でコードを書いていても、１週間後に見返すと、それはもう他人の書いたコードと化すので、読みやすいコードを書くことは大事だと僕は思います！

コードの量が減らせる

h1 {
    font-weight: bold;
    font-size: 30px;
    color: pink;
}
h2 {
    font-weight: bold;
    font-size: 30px;
    color: pink;
}
h3 {
    font-weight: bold;
    font-size: 30px;
    color: pink;
}

h1,
h2,
h3 {
    font-weight: bold;
    font-size: 30px;
    color: pink;
}

「セレクターリスト」を使うことで、単純にコードの量が減らせます。

使える場面ではどんどん使っていきましょう！！

コードのメンテナンス性が上がる

セレクターリストを使うことで、コードのメンテナンス性が上がります。

コードをまとめることができれば、その１箇所を変えれば、変更はそのスタイルが当たる全ての要素に適用されます。

逆に、コードをまとめないで、同じようなコードを複数の箇所で書いていた場合、それら全てに変更を加える必要がでてきます。

何行も何行もコードを書き換えるのはマルチカーソルを使ったとしても億劫ですし、ミスが起きてしまうかもしれません。

なので、できるだけセレクターリストを使っていきましょう！！

「セレクターリスト」を使う上での注意点

非常に便利な「セレクターリスト」ですが、使用上の注意点もあります。

それについても記述しておきますね。解決策もセットで！

「セレクターリスト」の中に１つでも無効なものがあると他の全てにスタイルが当たらなくなる。

h2,
h3,
input:blank {
    border: 2px solid pink;
}

h2 {
    border: 2px solid pink;
}
h3 {
    border: 2px solid pink;
}
input:blank {
    border: 2px solid pink;
}

一見同じように見える上の２つは等価ではありません。

「,」カンマで区切ったセレクターの中に、１つでも無効なものがあると、セレクターリストに含まれる他の要素にもスタイルが当たらなくなるので注意が必要です。

セレクターリストを使わずに個別に書いている場合は、このようなことはおきないので、その点が上の２つでは違いますね。

セレクターリストの中にWebブラウザにとって解釈できないセレクターが１つでも含まれていたら、そのセレクターリスト自体が無効となります。

「:blank」の詳しい解説は今回しないのですが「:blank」はサポートされているWebブラウザが少ないです。「:blank」のようなWebブラウザによってはサポートされていないものを使う際は注意してください。

解決策！「:is()」「:where()」を使えばOK！

:is(
    h2,
    h3,
    input:blank
) {
    border: 2px solid pink;
}

:where(
    h2,
    h3,
    input:blank ) {
    border: 2px solid pink;
}

「:is()」もしくは「:where()」を使えばこの問題は解決します。

「:is()」と「:where()」の中にセレクターリストを入れると、そのセレクターリストの中で１つが無効なセレクターであっても、他のセレクターにはしっかりスタイルが当たるようになります。

なるほど！怪しいものを使う際はこれを使えばいいんだね！

参考リンク。

仕様書。
https://drafts.csswg.org/selectors/#grouping

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/Selector_list

あわせて読みたい記事。

まとめ

CSSの「セレクター」とは「どの要素にスタイルを当てるか？」を指定する箇所のことを指す。

「セレクターリスト」とは、同じスタイルを当てる「複数のセレクター」を「１まとめにするセレクターの書き方」のこと。

セレクター同士を「,」カンマ区切りで書いてあげればOK！

「セレクターリスト」を使うメリットは下記の通り。

ですが、セレクターリストの中にWebブラウザにとって解釈できないセレクターが１つでも含まれていたら、そのセレクターリスト自体が無効となる。

それに対しては、「:is()」「:where()」を使う、という解決策がある。

この記事が気に入った方は僕のTwitter（@chibasyuta）のフォローもお願いします！

また、下の動画でも「セレクターリスト」について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！