はじめに

これまで私は「属性セレクタ」を触る事が無かったのですが、少し触れる機会がありましたので自分への勉強がてら「属性セレクタとはどういったものなのか」について紹介してみたいと思います。

目次

属性セレクタとは

属性セレクタとは、CSSで指定した属性や属性値を持つ要素に対してスタイルを指定できる仕組みです。

「属性」および「属性値」については以下のような感じになります。

a要素の場合

<a href="http://****" target="_bkank" >

この場合、「href」が属性で「http://****」が属性値
同じく「target」が属性で「_bkank」が属性値

img要素の場合

<img src="images/***.jpg" alt="画像">

この場合、「src」が属性で「images/***.jpg」が属性値
同じく「alt」が属性で「画像」が属性値

属性セレクタの一覧

以下のようなa要素があった場合の属性セレクタの例です。

HTML

<a href="https://abc.jp">https://abc.jp</a>

属性セレクタには「完全一致」「前方一致」「後方一致」「部分一致」など、以下の種類があります。

主な属性セレクタ

例	概要
a [ href ]	属性にhrefを持つa要素に適応される
a [ href = “https://abc.jp” ]	属性値がhttps://abc.jpのa要素に適応される
a [ href ~= “https://abc.jp” ]	属性値を複数持つ場合で、その1つにhttps://abc.jpを持つa要素に適応される
a [ href |= “https://abc.jp” ]	属性値がhttps://abc.jpで始まり-で繋がれたa要素にも適応される
a [ href ^= “https://abc.jp” ]	属性値がhttps://abc.jpで始まるa要素に適応される（前方一致）
a [ href $= “https://abc.jp” ]	属性値がhttps://abc.jpで終わるa要素に適応される（後方一致）
a [ href *= “https://abc.jp” ]	属性値がhttps://abc.jpを含むa要素に適応される（部分一致）

これらをCSSに設定します。

具体的には以下の例をご覧ください。

属性セレクタの例

CSSが適応される場合のみ、文字色が赤くなるように設定しています。

特定の属性にCSSを設定する場合の例

a [ href ]

HTML

<a href="https://www.ws-pilgrimage.jp">https://www.ws-pilgrimage.jp</a>
<a href="https://www.abc.jp/">https://www.abc.jp/</a>

CSS

a[href] {
 color: red;
}

できあがったもの

属性に「href」を持つa要素にCSSが適応されるため、上下どちらもテキストが赤くなりました。

特定の属性値を持ち、かつ特定の属性にCSSを設定する場合の例

a[href = "***"]

HTML

<a href="https://www.ws-pilgrimage.jp">https://www.ws-pilgrimage.jp</a>
<a href="https://www.abc.jp/">https://www.abc.jp/</a>

CSS

a[href = "https://www.ws-pilgrimage.jp"] {
 color: red;
}

できあがったもの

属性値が「https://www.ws-pilgrimage.jp」のa要素のみテキストが赤くなりました。

属性値を複数持つ場合で、その1つに特定の属性値を含む属性にCSSを設定する場合の例

a[href ~= "***"]

今回ちょっとa要素で例を挙げるのが難しかったのでp要素で説明します。

p要素の中のclass属性の中に「text_red」の属性値を含めばテキストが赤くなるという例です。

（厳密には、class属性の属性値に属性セレクタを設定しないとは思いますが・・・あくまでも例として）

HTML

<p class="text_blue">テキストが赤くなる</p>
<p class="text_red">テキストが赤くなる</p>
<p class="text_red text_blue">テキストが赤くなる</p>

CSS

p[class ~= "text_red"] {
 color: red;
}

できあがったもの

ちょっとよく分からないかもしれませんが、同じHTMlで要素名[属性名 = "***"]の属性セレクタでCSSを設定すると以下のようになります。

CSS

p[class = "text_red"] {
 color: red;
}

できあがったもの

最初の例との違いは、一番した（class属性が「text_red text_blue」で設定された物）はテキストが赤くなっていません。

要素名[属性名 = "***"]の属性セレクタの場合、属性値が完全一致する必要があります。

特定の属性値で始まり「-」で繋がれた属性値にもcssを設定する場合

a[href |= "***"]

こちらもa要素で例を挙げるのが難しかったのでp要素で説明します。

HTML

<p class="text">テキストが赤くなる</p>
<p class="text-red">テキストが赤くなる</p>
<p class="text_red">テキストが赤くなる</p>
<p class="font-red">テキストが赤くなる</p>
<p class="text-blue">テキストが赤くなる</p>

CSS

p[class |= "text"] {
 color: red;
}

できあがったもの

属性値が「text」あるいは「text-***」の場合にCSSが適応されます。

「-」（ハイフン）で繋ぐ必要があるため、「_」（アンダースコア）ではCSSは適応されません。

特定の属性値で始まる属性にCSSを設定する場合の例（前方一致）

a[href ^= "***"]

今回は前方一致の例になるため、属性セレクタで設定した属性値から後ろは何が入っていても適応されます。

HTML

<a href="https://www.ws-pilgrimage.jp/">https://www.ws-pilgrimage.jp/</a>
<a href="https://www.ws-pilgrimage.jp/category/webcreate/htmlcss/">https://www.ws-pilgrimage.jp/category/webcreate/htmlcss/</a>
<a href="h_https://www.ws-pilgrimage.jp/">h_https://www.ws-pilgrimage.jp/</a>

CSS

a[href ^= "https://www.ws-pilgrimage.jp/"] {
 color: red;
}

できあがったもの

一番下は属性値の前方に「h_」をあえて入れてみましたが、前方が不一致となるためCSSが適応されません。

特定の属性値で終わる属性にCSSを設定する場合の例（後方一致）

a[href $= "***"]

前方一致と同様に、属性値の前に何が入っていてもCSSが適応されます。

HTML

<a href="https://www.ws-pilgrimage.jp/">https://www.ws-pilgrimage.jp/</a>
<a href="/">/</a>
<a href="https://www.ws-pilgrimage.jp/category/webcreate/htmlcss/">https://www.ws-pilgrimage.jp/category/webcreate/htmlcss/</a>

CSS

a[href $= "ws-pilgrimage.jp/"] {
 color: red;
}

できあがったもの

属性値の後ろに値が追加されると後方が不一致となりCSSは適応されません。

特定の属性値を含む属性にCSSを設定する場合の例（部分一致）

a[href *= "***"]

今回の例は部分一致となるため、前方または後方に属性値が追加されてもCSSは適応されます。

HTML

<a href="https://www.ws-pilgrimage.jp/">https://www.ws-pilgrimage.jp/</a>
<a href="/">/</a>
<a href="https://www.ws-pilgrimage.jp/category/webcreate/htmlcss/">https://www.ws-pilgrimage.jp/category/webcreate/htmlcss/</a>
<a href="/category/webcreate/htmlcss/">/category/webcreate/htmlcss/</a>

CSS

a[href *= "ws-pilgrimage.jp/"] {
 color: red;
}

できあがったもの

今回、属性セレクタをひととおり触ってみたのですが、具体的な活用方法ってどんなケースであるのかな、という印象です。

たぶんどこかで活躍する場があるとは思うのですが、あまりそれを見いだせないのはまだまだ未熟なのかな、とか思ったりします。