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

今回から属性セレクター（attribute selector）を使ってみよう。
属性セレクターは、要素に
・その「属性（attribute）」があるかどうか
・その属性の「値」がどうなっているか
で要素を詳細に指定するセレクターです。

今回はその中の、属性存在＆属性値セレクター（Attribute presence and value selectors）って呼ばれてるのを使ってみよう。
これはセレクターLevel 2（わりと初期）からあるセレクターです。

1. そもそも「属性」ってなに？
2. 「属性存在＆属性値」属性セレクター
   1. [att]（att属性がある）
   2. [att="val"]（att属性があって、値もこれ）
   3. [att~="val"]（att属性があって、値のリストの中にこの値がある）
   4. [att|="val"]（att属性があって、ハイフンの前にこの値が含まれる）

参考：
・Selectors Level 4 | W3C Working Draft
・CSS セレクター | MDN
・HTML属性リファレンス｜属性一覧｜MDN

そもそも「属性」ってなに？

そういえば「属性って何？」という話を一度もしていなかったので、ちょっと触れておきます。（わかってる人は飛ばして）

HTMLの全要素は「属性」を付けることができます。
属性なしでも使える要素もあれば、属性必須の要素もあります。

例えば、リンクのための<a>要素は href属性（リンク先のURLを指定するための属性）が必須。無いとリンク先に飛べないから。
また、画像を表示する<img>要素などはsrc属性（埋め込みコンテンツを指定するための属性）が必須です。何を表示するか指定されてないとブラウザは何も表示できないから。
属性が必須でない要素もあります。例えば <div>や<p>要素など。必要があれば属性も付けて使うって感じです。

属性は、要素名のあとに半角スペースで区切って属性とその値を指定します。

属性とその値のセットは複数指定できます。その場合も半角スペースで区切ります。

属性にはたくさんの種類があります。
そして、「特定の要素にしか使えない属性」もあれば、「どの要素にも使える属性」もあります。
例えば href属性は <a>要素や <area>要素など リンクができる要素にしか使えません。
target属性も同じく、リンクを開くタブやウィンドウの指定をするものなので、リンクの役割がある要素にしか使えません。

class属性やID属性、title属性、lang属性などは、どの要素にも使えます。このように全要素に使える属性を「グローバル属性」といいます。

MDNに「属性一覧」がありますので、ご参考までにリンクを貼っておきます。
HTML属性リファレンス｜属性一覧｜MDN

「属性存在＆属性値」属性セレクター

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

で、冒頭でも言ったけど、今回はまず一番最初の属性存在＆属性値セレクター（Attribute presence and value selectors）というのを使ってみます。

これは属性が「あるかどうか」や、その「属性値がなにか」でセレクトします。
書き方が4種類ありますので、1コずつ見ていきましょう。

[att]（att属性がある）

これは [ ] 内に書いた属性名があればスタイルを適用するってやつ。
要素を属性名で絞り込むセレクターです。

CSSで下記のように、title属性がある<p>要素をセレクターにし、文字色をグリーンに指定してみました。

p[title] {
 color:green;
}

HTMLはこれ。2つめの<p>要素に title属性があります。

<div>
  <p>title属性なしの p要素</p>
  <p title="タイトルのテキスト">title属性がある p要素</p>
</div>

プレビューです。

See the Pen Untitled by yuki★hata (@yuki__hata) on CodePen.

複数の属性を同時に指定することも可能。[ ] をスペース無しで続けて書くだけ。
これによってより詳細にセレクトできるようになります。
下の指定は「title属性も class属性もある <p>要素」というセレクター。文字色を栗色にします。

p[title][class] {
 color:maroon;
}

HTMLはこれ。3つめの<p>要素には title属性とclass属性の両方があります。

<div>
  <p title="タイトルのテキスト">title属性がある p要素</p>
  <p class="test">class属性がある p要素</p>
  <p title="タイトルのテキスト" class="test">title属性もclass属性もある p要素</p>
</div>

プレビューはこちら。指定した2つの属性がある<p>要素しか反応しませんね。

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

[ ] の前に要素名を書かなくても使えます。
そうすると、条件が合う要素全部が対象になります。
下の指定は「title属性も class属性もある要素ぜんぶ」というセレクター。文字色をブルーにします。

[title][class] {
 color:blue;
}

HTMLはこれ。<span>要素を加えて、その1つに title属性と class属性の両方を指定しています。

<div>
  <p title="タイトルのテキスト">title属性がある p要素。
  <span title="タイトルのテキスト" class="test">その中にspan要素を入れて、
  title属性もclass属性も付けてみた</span>。</p>
  <p class="test">class属性がある p要素。<span>その中に属性なしのspan要素</span></p>
  <p title="タイトルのテキスト" class="test">title属性もclass属性もある p要素</p>
</div>

プレビューはこちら。条件どおりに2つの属性を持っている要素だけ反応します。

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

[att="val"]（att属性があって、値もこれ）

先程のサンプルは属性名だけでしたが、これは「その値」まで絞り込むやつ。

CSSで下記のように、class属性があって、値が「sample」ある<p>要素をセレクターにし、文字色をグリーンに指定してみます。

p[class="sample"] {
 color:green;
}

HTMLはこれ。

<div>
  <p>class属性がない p要素</p>
  <p class="test">class属性の値がtestな p要素</p>
  <p class="sample">class属性の値がsampleな p要素</p>
  <p class="sample test">class属性の値がsampleとtestな p要素</p>
</div>

プレビューです。属性名と属性値が一致した要素だけ反応します。
最後の<p>要素は、class属性の値の「sample」があるけど、他の値（test）も入っているので該当しません。

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

ではこのように、値のところを2つにしたらどうなるか。

p[class="sample test"] {
 color:green;
}

プレビューです。
最後の class属性の値が「sample と test」の <p>要素のみ反応するようになりました。
どっちか1コ（sampleだけ、testだけ）のものは該当しません。

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

これも要素名を付けなくても、[ ] を複数にしてもOK。
ではこのように、class属性がsampleで title属性が「タイトル」な要素全部を対象にして、文字色をパープルにしてみます。

[class="sample"][title="タイトル"] {
color:purple}

HTMLはこれ。<span>要素を足して、属性や属性値を加えてみた。

<div>
  <p>class属性がない p要素<span class="sample" title="タイトル">の中の
  class属性がsampleで title属性が「タイトル」なspan要素</span></p>
  <p class="test" title="タイトル">class属性がtestで title属性が「タイトル」な p要素</p>
  <p class="sample">class属性の値がsampleな p要素</p>
  <p class="sample" title="タイトル">class属性がsampleで  title属性が「タイトル」な p要素</p>
</div>

プレビューです。条件に一致した要素のみ反応しています。

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

[att~="val"]（att属性があって、値のリストの中にこの値がある）

さっきの [att=val] という書き方では、指定した値がピッタリ一致していないとダメでした。
もっと条件をゆるく、複数の値の中に該当する値があれば反応するようにしたければ、この [att~=val] という書き方を使います。属性名のあとに「~（チルダ）」を付けるだけ。

「~（チルダ）」は、キーボードの上部の数字の 0 の右側2つ目のキーを、Shiftキーを押しながら打つとでます。日本語入力モードでは「〜（から）」の字。その英語入力モード。

下記のように、class属性の値の中に「test」があれば、文字色をグリーンにする指定をします。

p[class~="test"] {
 color:green;
}

HTMLはこれ。
class属性の値は demo、test、sampleといった具合でいろいろ指定しています。

<div>
  <p class="test">class属性の値がtestな p要素</p>
  <p class="sample">class属性の値がsampleな p要素</p>
  <p class="sample test">class属性の値がsampleとtestな p要素</p>
  <p class="demo sample test">class属性の値がdemoとsampleとtestな p要素</p>
</div>

プレビューはこんなかんじ。
値が複数あっても、その中に「test」という値があれば反応していますね。

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

この書き方は、単純に値を複数に増やしても反応しません。
例えばこのように test と sample を半角スペースで区切って指定しても...

p[class~="test sample"] {
 color:maroon;
}

プレビューです。このようにどの値にも無反応になっちゃった。

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

値の test か sample が入っていたら反応してほしい場合は、このように [ ] を2つ、スペース無しでくっつけて繋ぎます。

p[class~="sample"][class~="test"] {
 color:maroon;
}

プレビューです。
sample と test の両方の値が入ってるものだけ反応しています。

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

これも要素名なしで書いてもOKです。
下は、class属性の値の中に demoが入ってる全要素を対象にしています。

[class~="demo"] {
 color:blue;
}

HTMLはこちら。
p要素だけでなく span要素も加えています。

<div>
  <p class="test">class属性の値がtestな p要素<span class="demo">の中にclass属性の値が
  demoなspan要素</span></p>
  <p class="sample">class属性の値がsampleな p要素</p>
  <p class="sample test">class属性の値がsampleとtestな p要素</p>
  <p class="demo sample test">class属性の値がdemoとsampleとtestな p要素</p>
</div>

プレビューです。
class属性の値に demo がある要素が反応しています。

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

ここまでのサンプルで「class属性」を使って説明しました。
（値を複数持てる属性で、説明に便利だったので使いました）
実は class属性はもっとずっと短いセレクターにできます。それがクラスセレクター。
属性値のまえに「.（ピリオド）」を付けるアレです。
[class~="demo"] という書き方なら、.demo というセレクターでOK。
p[class~="demo"] なら、p.demo で。
p[class~="sample"][class~="test"] なら、p.sample.test と書けば同等のセレクターになります。
（クラスセレクターに関しては、何コか先の記事で取り上げます）

[att|="val"]（att属性があって、ハイフンの前にこの値が含まれる）

属性名の後に「 |（パイプ or バーティカルバー）」を付けると、ハイフン（-）でつながった属性値の「ハイフンより前の文言」に一致するものをセレクターにします。

ハイフン（-）でつながった属性値とは、例えば lang属性（要素の言語の定義をする属性）のサブタグコードが代表的。
lang属性の値は、<html lang="ja"> といった具合で、2文字程度の短いコードで、ja（日本語）、en（英語）、zh（中国語）、es（スペイン語）などと指定します。
で、同じ言語でも使われている地域でちょっと違う場合、ハイフンを付けたサブタグも使えます。
例えば同じ英語でも、en-us（アメリカ英語）en-gb（イギリス英語）en-au（オーストラリア英語）en-nz（ニュージーランド英語）などがあり、中国語は、zh-TW（台湾での中国語）zh-CN（中華人民共和国での中国語）があります。
他に、es-ES（スペインでのスペイン語）、es-013（中央アメリカ（メキシコとかキューバとか）でのスペイン語）などもあります。

例えば lang="en-us en-gb en-au en-nz" という指定の場合、
[lang="en"] や [lang~="en"] のセレクターでは、一致する値が無いことになるのよ。
ですが、 [lang|="en"] と「 | 」を付け足すだけで、ハイフンより前に en があれば該当させられるってわけです。

そしてこの [lang|="en"] は、ハイフンなしの lang="en" も該当します。
ハイフンがあればそのハイフンより前のコード、ハイフンが無くてもコードが一致していたら該当するという、フレキシブルな仕様です。

「 |（パイプ or バーティカルバー）」は、キーボードの上部の「~（チルダ）」の右隣のキーを、やはりShiftキーを押しながら打ちます。

では試してみよう。
HTMLはこちら。<p>要素や <span>要素に lang属性を指定しています。

<div class="test">
  <p lang="en-us en-gb en-au en-nz">Hello</p>
  <p lang="pt">Olá</p>
  <p lang="zh-CN">您好 <span lang="en">(Hello)</span></p>
  <p lang="ja">こんにちは <span lang="en">(Hello)</span></p>
</div>

CSSで [lang|="en"] をセレクターにして、文字色や太さを変えてみます。

.test [lang|="en"] {
 color:purple;
 font-weight:bold;
 }

プレビューです。
lang属性の値で「en」または「en-（ハイフン繋ぎ）」な要素が反応していますね。

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

次回予告

ちょっと記号を足すだけで、セレクトの範囲が変わっておもしろいですね。（覚えるのは大変だけど）

次回も属性セレクターの続きです。
次回は、部分照合属性セレクター（Substring matching attribute selectors）ってやつを使ってみます。
これは、属性値の文言の中の一部が合致していればOKというやつ。けっこう便利です。

関連記事

• 【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 (主軸方向)