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

属性セレクター（attribute selector）の続きです。
今回は、部分照合属性セレクター（Substring matching attribute selectors）を使ってみます。

1. 「部分照合」属性セレクター
   1. [att^="val"]（att属性があって、値の先頭がこの文字から始まる）
   2. [att$="val"]（att属性があって、値の最後がこの文字で終わる）
   3. [att*="val"]（att属性があって、値のどこかにこの文字がある）

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

「部分照合」属性セレクター

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

今回は2番めの部分照合属性セレクター（Substring matching attribute selectors）です。

これは文字どおり属性値が「部分的に」一致するかどうかでセレクトするもので、
[att^="val"] は、この属性の値が " " 内の文字から始まる。
[att$="val"] は、この属性の値が " " 内の文字で終わる。
[att*="val"] は、この属性の値の中に " " 内の文字がある。
というセレクターです。
言葉で説明するよりとにかく使ってみたらすぐわかるので、サンプルを見てみよう。

[att^="val"]（att属性があって、値の先頭がこの文字から始まる）

[att^="val"] というカタチで属性名のあとに「^（アクサン・シルコンフレックス）」を付けて使います。

「^」はフランス語のつづりで、â とか ê とか母音の上についてる山型の記号です。
キーボードの上部の数字の0の右側2つ目、「~（チルダ）」と同じキー。チルダは Shiftキーを押しながら打ちますが、「^」はそのまま打てば出ます。
アクサン・シルコンフレックス（accent circonflexe）って長いですが、ヤマガタとかハットとか呼ぶのが日本語の一般名称みたいです。

HTMLはこんなかんじで、<a>要素の「href属性」でリンクをいろいろ作っています。

<ul>
  <li><a href="#point1">#point1へのリンク</a></li>
  <li><a href="#point2">#point2へのリンク</a></li>
  <li><a href="#Information">#Informationへのリンク</a></li>
  <li><a href="demo.com">demo.comへの外部リンク</a></li>
  <li><a href="ex.jp">ex.jpへの外部リンク</a></li>
  <li><a href="https://ex.com">https://ex.comへの外部リンク</a></li>
</ul>

CSSで下記のように指定して、「href属性」の値の「最初に#がつくやつ」をセレクターに。文字色をグリーンに指定しています。
最初に#がつくのはページ内リンク。ページ内リンクだけ文字色を変えています。

a[href^="#"] {
  color:green;
  }

プレビューです。

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

上のサンプルは値を "#" にしていて、最初の1文字だけみたいなサンプルなので、指定する値を "#point" という文字列にしてみます。
また、[ ] の前の a も取ってみます。そのページに href属性を持つのが <a>だけなら要素名は不要です。

[href^="#point"] {
  color:blue;
  }

プレビューです。「#point」で始まっている最初の2つだけ 文字色が変わりました。

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

[att$="val"]（att属性があって、値の最後がこの文字で終わる）

さっきの [att^="val"] は、属性値の「最初の文字列」で指定しましたが、
この [att$="val"] という書き方だと「最後の文字列」による指定になります。
属性名のあとに「$（ドルマーク）」を付けます。

「$（ドルマーク）」は、キーボードの上部の数字の４を、Shiftキーを押しながら打つとでます。

HTMLはさっきと全く同じです。

<ul>
  <li><a href="#point1">#point1へのリンク</a></li>
  <li><a href="#point2">#point2へのリンク</a></li>
  <li><a href="#Information">#Informationへのリンク</a></li>
  <li><a href="demo.com">demo.comへの外部リンク</a></li>
  <li><a href="ex.jp">ex.jpへの外部リンク</a></li>
  <li><a href="https://ex.com">https://ex.comへの外部リンク</a></li>
</ul>

CSSで下記のように、「href属性」の値の「最後が .com で終わるやつ」を指定し、文字色を栗色にしています。
この例は冒頭の a を略してます。ほかに href属性を持つ要素がなくて要素名を略しても良いならこれでOK。

[href$=".com"] {
  color:maroon;
  }

プレビューです。
href属性の値が「.com」で終わってるものだけ、文字色が変わっています。

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

[att*="val"]（att属性があって、値のどこかにこの文字がある）

最後の [att*="val"] という書き方は、属性値の中のどこかにこの文字列が含まれればセレクトできます。
属性名のあとに「*（アスタリスク）」を付けます。

「*（アスタリスク）」は、キーボードの Enter（Macはreturn）キーの左側2つめ、「 :（コロン）」や「け」と同じキーを、Shiftキーを押しながら打つとでます。
テンキーが付いた拡張キーボードの人は右端のマイナスマークの上。

HTMLはさっきと全く同じです。

<ul>
  <li><a href="#point1">#point1へのリンク</a></li>
  <li><a href="#point2">#point2へのリンク</a></li>
  <li><a href="#Information">#Informationへのリンク</a></li>
  <li><a href="demo.com">demo.comへの外部リンク</a></li>
  <li><a href="ex.jp">ex.jpへの外部リンク</a></li>
  <li><a href="https://ex.com">https://ex.comへの外部リンク</a></li>
</ul>

CSSで下記のように、「href属性」の値に「ex が入っているもの」を指定し、文字色をブルーにしています。

[href*="ex"] {
  color:blue;
  }

プレビューです。
href属性の値に「ex」が含まれるものだけ文字色が変わっていますね。

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

ちょっと邪道かもですが、「属性値の中のどこかにこの文字列が含まれれば」という条件なら、先頭にあっても、最後にあっても良いわけですよね。
ですので下記のように、「#point（これは先頭にあります）」や「.com（これは最後にある）」でも指定してみました。

[href*="#point"] {
  color:salmon;
  }
[href*=".com"]
  {color:purple;
  }

プレビューです。
ちゃんと反応してますね。

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

これを見ちゃうと、 [att*="val"] さえ覚えておけばイイような気がしますが...。
まあ、先頭用（^）と、末尾用（$）がちゃんと用意されているわけですし、ルール通りに使ったほうがイイよねやっぱり...。

次回予告

次回も属性セレクターの続きです。
次回は、属性値の大文字・小文字の区別ができるセレクターを見てみましょう。

関連記事

• 【66-2】ユーザーアクション擬似クラス　:active　:hover
• 【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 (交差軸方向)