【65-3】属性セレクター [att="val" i] [att="val" s]
最終更新日:2023年03月16日 (初回投稿日:2023年03月16日)
属性セレクター(attribute selector)の続きです。
今回は、属性値の大文字小文字の区別を「する・しない」を指定できるセレクターです。
参考:
・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つも「属性セレクター」に含まれるんだそうです。
- 関連記事
-
- 【66-1】ロケーション擬似クラス :target :target-within :local-link
- 【66-1】ロケーション擬似クラス :link :visited :any-link
- 【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 (主軸方向)
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク