ほんっとにはじめての HTML5 と CSS3

セレクターの記事の途中ですが、今回はセレクターリスト（selector list）についてメモっておきます。
けっこうよく使うし、知っておくと便利です。

1. 「,」で区切るセレクターリストを使うと便利！
2. 無効なセレクターがあるとリスト全部が無効になるよ
   1. 寛容なセレクターリストの :is( ) と :where( )

参考：
・Selectors Level 4 | W3C Working Draft
・CSS セレクター | MDN

「,」で区切るセレクターリストを使うと便利！

前回のユニバーサルセレクター（*）のサンプルのコードで、「,（カンマ）」で区切ったセレクターを使っていますが、これが「セレクターリスト」です。

*, *::before, *::after {
  box-sizing: border-box;
}

セレクターリスト とはこのように、同じ指定をしたい複数のセレクターを ,（カンマ）で区切ってリスト化したもののこと。
指定を1つにまとめられれば時短だし、CSSの容量も小さくすることができます。

例えば、下のように全く同じ指定内容のセレクターが2コあったら、
それぞれに同じ指定を書くのは、時間もかかるし無駄ですね。

div#test1 {
  border:solid #ddd 1px;
  padding:1em;
  margin:1em;
  text-align:center;
  background:white;
}
div#test2 {
  border:solid #ddd 1px;
  padding:1em;
  margin:1em;
  text-align:center;
  background:white;
}

これを1つにまとめたい時は、セレクタを「 , （カンマ）」で区切ってセレクターリストにすれば解決。

div#test1,
div#test2 {
  border:solid #ddd 1px;
  padding:1em;
  margin:1em;
  text-align:center;
  background:white;
}

改行せずに1行にしてもOK。「,」のあとにスペースを入れても入れなくてもOK。

div#test1,div#test2 {
  border:solid #ddd 1px;
  padding:1em;
  margin:1em;
  text-align:center;
  background:white;
}

ちなみに上のサンプルコードのプレビューはこちら。

See the Pen セレクターリストTEST by yuki★hata (@yuki__hata) on CodePen.

このセレクターリストは、リセット（reset）CSSとかでよく使われてますので、もう見たことあるかもですね。
下は Josh W. Comeau氏のリセットCSS のほんの一部です。
同じ指定にしたいセレクターを、1つにまとめて書いています。

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

リセットCSS（reset.css）とは、ブラウザのデフォルトスタイルをリセットするための指定です。
ブラウザはあらかじめ各要素にデフォルトのスタイル（UA stylesheet）が設定されています。
ブラウザごとに少し異なるスタイルになっていると、それが影響して見た目が若干違ってしまう。
これを防ぐために、一旦デフォルトスタイルをチャラにしてから制作者のスタイルを指定するために使います。（今の各ブラウザは、そんなに独自スタイルを使ってないそうですが）

無効なセレクターがあるとリスト全部が無効になるよ

セレクターリストで注意が必要なのは、リストの中に1コでも「ブラウザが未対応なセレクター」があると、その指定全部が無効になること。
リスト内の他の有効なセレクターにも指定が反映されません。

例えばこんな指定。
リストの2番目の h3に無効な疑似クラスを付けてみましたが、これだとこの指定そのものが全部無効。有効なはずのセレクター h2 や h4 にもこの指定は効きません。

h2, h3:unsupported, h4 {
  color: red;
}

寛容なセレクターリストの :is( ) と :where( )

まだ記事が「擬似クラス」まで進んでないけど、関連情報で :is( ) と :where( ) について触れておきます。

さっきのサンプルコードですが、擬似クラス :is( ) を使って下記のように書くと、h2 や h4 に指定は反映されます。無効な h3:unsupported のみ効かない。

:is(h2, h3:unsupported, h4) {
  color: red;
}

これは、擬似クラス :where( ) を使っても同じ効果です。

:where(h2, h3:unsupported, h4) {
  color: red;
}

ちなみに、:is( ) と :where( ) の違いは、「詳細度」です。
:where( ) は詳細度が0という特徴があります。

（CSSの詳細度については、【4】CSSの優先度のルール（ブラウザが混乱しないためのルールだよ）をご覧ください）

例えば、こんなふうに :is( ) の指定をして文字色を赤にします。h3要素はクラス名「styling」を付けています。
その後に要素セレクターを使って h3 だけ文字色を青に指定（4行目以降）。

:is(h2, h3.styling, h4) {
  color: red;
}
h3 {
  color: blue;
}

でもこの指定では h3 の文字色に変化がありません。
これは、要素セレクターより クラスセレクターの詳細度が高いためです。

See the Pen 擬似クラス :is() と :where() の違い-1 by yuki★hata (@yuki__hata) on CodePen.

:where( ) の指定なら h3 の文字色を青に上書きできます。
:where の詳細度が0なので 要素セレクターのほうが詳細度が上になるので。

:where(h2, h3.styling, h4) {
  color: red;
}
h3 {
  color: blue;
}

:where( ) のプレビューです。

See the Pen 擬似クラス :is() と :where() の違い-2 by yuki★hata (@yuki__hata) on CodePen.

この性質を知って :is( ) と :where( ) を使い分けるといいかんじですね。
擬似クラス :is( ) と :where( ) についてはいずれ詳しく記事にします。

次回予告

さて次回からは、個々のセレクターの話に戻ります。
次回は「結合子」を使ったセレクターです。
2つ以上の要素名を「結合子」で組み合わせることで、よりピンポイントにセレクトできるようになります。

関連記事

• 【66】擬似クラスと疑似要素（2つの違いとそれぞれの特徴）
• （ちょっとメモ）名前空間（ネームスペース）とCSSセレクター
• 【65-3】クラスセレクター（.）と IDセレクター（#）
• 【65-3】属性セレクター　[att="val" i] [att="val" s]
• 【65-3】属性セレクター　[att^="val"] [att$="val"] [att*="val"]
• 【65-3】属性セレクター　[att] [att="val"] [att~="val"] [att|="en"]
• 【65-2】結合子を使うセレクター（E F,　E > F,　E + F,　E ~ F）
• （ちょっとメモ）「,」で区切る「セレクターリスト」
• 【65-1】エレメンタルセレクター（要素名で指定するセレクター）
• 【65】CSSのセレクターを整理しよう（セレクター 一覧）
• 【64-11】アイテム配置を一括指定する place-itemsショートハンド
• 【64-10】アイテムの個別配置を一度に指定する align-items (交差軸方向)
• 【64-9】アイテムの個別配置を一度に指定する justify-items (主軸方向)
• 【64-8】アイテム個別の配置を一括指定する place-selfショートハンド
• 【64-7】アイテム個別の配置を指定する align-self (交差軸方向)