【65-3】属性セレクター [att="val" i] [att="val" s]

属性セレクター（attribute selector）の続きです。
今回は、属性値の大文字小文字の区別を「する・しない」を指定できるセレクターです。

本日のINDEX

1. 属性値の大文字・小文字の区別
   1. [att="val" i] att属性の値の大文字・小文字は区別しない
   2. [att="val" s] att属性の値の大文字・小文字も一致する

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

属性値の大文字・小文字の区別

W3C仕様書では、属性セレクターは下記のような種類に分けられています。
・属性存在＆属性値セレクター（Attribute presence and value selectors）
・部分照合属性セレクター（Substring matching attribute selectors）
・属性値の大文字小文字の区別をする修飾子（Case-sensitive modifier）
・クラスセレクターとIDセレクター

今回は3番めの属性値の大文字小文字の区別をする書き方を試してみよう。

値の大文字・小文字を区別しない場合は [att="val" i] という書き方、
区別する場合は場合は [att="val" s] という書き方をします。

これは仕様書 Selectors Level 4 からの新しい属性セレクターなので、未実装のブラウザもあります。 Firefoxは実装しています。（2023年3月記）

大文字小文字をきちんと区別することを「case sensitive」といいます。
区別するのは「sensitive（センシティブ=敏感）」の「s」、区別しないのは「insensitive（鈍感）」の「i」だと思う。たぶん。

[att="val" i] att属性の値の大文字・小文字は区別しない

[att="val" i] というカタチで、[ ] 内の最後に「 i（小文字のアイ）」を付けると、属性値が大文字か小文字か区別せずにセンテンスが一致すればセレクターにします。

HTMLは このように、2つのリストを用意して、<ol>要素の「type属性」の値を、上のリストは「A（大文字）」、下のは「a（小文字）」で指定してみます。

<ol type="A">
  <li>サンプルリスト</li>
  <li>サンプルリスト</li>
</ol>
<ol type="a">
  <li>サンプルリスト</li>
  <li>サンプルリスト</li>
</ol>

CSSで下記のように指定します。
type属性の値が「a」で大文字小文字を問わない（=Aも含む）というセレクターで、リストマーカーの種類は小文字のアルファベット、背景色はピンクにしています。

[type="a" i] {
  list-style-type: lower-alpha;
  background: pink;
  }

プレビューです。

See the Pen 属性セレクター [att="val" i] TEST by yuki★hata (@yuki__hata) on CodePen.

正直コレ、「i」をわざわざ書き加えなくても、ol[type="a"] と指定したのと同じ結果になります。（"a" と指定したら a でも A でも反応する）

また、サンプルでは、要素名なしで [type="a" i] と書いていますが、同じページに type="a" が他になければこれでOK。
他の要素で、同じ属性と属性値があって、同じスタイルにしたくないなら、ちゃんと要素名を書いて区別してあげよう。

[att="val" s] att属性の値の大文字・小文字も一致する

[att="val" s] というカタチで、[ ] 内の最後に「 s（小文字のエス）」を付けると、属性値が大文字か小文字かを区別したセレクターにできます。

ただこれ、セレクターLevel 4（Working Draft） に入っているもので、まだ未対応のブラウザも多いようです。Firefoxは対応しているようです。（2023年3月記）

とにかく試してみます。
HTMLは先ほどと全く同じです。

<ol type="A">
  <li>サンプルリスト</li>
  <li>サンプルリスト</li>
</ol>
<ol type="a">
  <li>サンプルリスト</li>
  <li>サンプルリスト</li>
</ol>

CSSはこちら。値の A（大文字）と a（小文字）でスタイルを分けています。

ol[type="A" s] {
  list-style-type:upper-alpha;
  background: lightgreen;
  }
ol[type="a" s] {
  list-style-type:lower-alpha;
  background: plum;
  }

5〜8行目は、type属性の値が「A（大文字）」なセレクターです。リストマーカーは大文字のアルファベット、背景色はライトグリーンにしています。
9〜12行目は、値が「a（小文字）」なセレクター。リストマーカーは小文字のアルファベット、背景色はプラム色にしています。

プレビューです。
ol[type="A" s] は大文字の A が値になってる <ol type="A"> にだけ適用され、
ol[type="a" s] は小文字の a の <ol type="a"> にしか反応しません。

See the Pen 属性セレクター [att="val" s] TEST by yuki★hata (@yuki__hata) on CodePen.

ただこの修飾子「s」は、いまのところ 一部のブラウザしか実装していないらしいので、 一応 Firefox（Mac）でのプレビューも貼っておきます↓ こんなかんじになります。

次回予告

次回で属性セレクターは最後です。
次回は、クラスセレクター（ . をクラス名の前につけるやつ）と IDセレクター（#をID名の前につけるやつ）を見てみます。
とてもよく使うセレクターなので、今さらって感じですけどね。この2つも「属性セレクター」に含まれるんだそうです。