CSS

Cascading Style Sheets attribute selector.

Attribute selector

　HTML タグは種類に応じて様々な属性と属性値を持つことができます。

　例えばリンクを挿入する際に使用する a要素の場合、href属性で「移動先の URL の情報」、target属性で「リンクを開くタブ・ウィンドウの情報」といった情報を持たせることができます。

<a href="https://www.yugien.xyz/" target="_blank">Yugien</a>

　また、画像を挿入する際に使用する img要素では、src属性で「画像ファイルの場所のパス情報」や alt属性で「画像が表示されない時の代替テキスト情報」を持たせることができます。

<img src="image/img001.jpg" alt="イメージ">

　テキストボックスを使用する際の input要素であれば、type属性で「フォーム部品の種類」などを指定できます。

<input type="text">

　ちなみに、a要素に alt属性を付加したり、img要素に type属性を付加するといったことは不可能で、要素に応じて付加が可能な属性は決められています。また、class や id も属性なので、class名や id名はこれらの属性値となっています。

　これら要素に付加された属性とその値を指定して、CSS の効果を適用できるのが、「属性セレクタ」です。

属性セレクタの種類

A[属性名]

指定の属性を持つ要素A

A[属性名="属性値"]

指定の属性が指定の値を持っている要素A

A[属性名~="属性値"]

属性値に一致する要素A

A[属性名^="文字列"]

属性値が指定の文字列から始まる要素A

A[属性名$="文字列"]

属性値が指定の文字列で終わる要素A

A[属性名*="文字列"]

属性値が指定の文字列を含む要素A

A[属性名] 「指定の属性を持つ要素A」

　指定の属性が付加されているものに装飾を適用します。

<p>class 無し</p>
<p class="example">class 有り</p>

p [class] {
	color: red;
}

　上記のように HTML と CSS を記述したとき、class属性がある p要素のみ装飾が適用されます。このとき属性値の内容は影響しません。

A[属性名="属性値"] 「指定の属性が指定の値を持っている要素A」

　指定の属性が指定の属性値を持っている要素にのみ装飾が付加されます。

<p>class 無し</p>
<p class="red">class 有り red</p>
<p class="blue">class 有り blue</p>

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

　上記のように HTML と CSS を記述したとき、class属性がある p要素の中でも、red の属性値を持った要素のみに装飾が適用されます。

A[属性名~="属性値"] 「属性値に一致する要素A」

　=（イコール）の前に ~（チルダ）を記述すると、指定の属性が指定の属性値を含んでいる要素に装飾が付加されます。

<p>class 無し</p>
<p class="red">class 有り red</p>
<p class="blue">class 有り red</p>
<p class="red blue">class 有り red と blue</p>

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

　たとえば上記のように、class の属性値が二つ指定されている場合でも、red の属性値を含んでいればその要素に装飾が適用されます。

A[属性名^="文字列"] 「属性値が指定の文字列から始まる要素A」

　=（イコール）の前に ^（キャレット）を記述すると、指定の文字列から始まる属性値を持っている要素に装飾が付加されます。

<p>class 無し</p>
<p class="red001">class 有り red001</p>
<p class="red002">class 有り red002</p>
<p class="red003">class 有り red003</p>

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

　たとえば上記のように記述したときは、classの属性値がredから始まる要素であれば装飾が適用されます。

A[属性名$="文字列"] 「属性値が指定の文字列で終わる要素A」

　=（イコール）の前に $（ドル）を記述すると、指定の文字列で終わる属性値を持っている要素に装飾が付加されます。

<p>class 無し</p>
<p class="red001">class 有り red001</p>
<p class="red002">class 有り red002</p>
<p class="red003">class 有り red003</p>

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

　たとえば上記のように記述したときは、classの属性値が 001 で終わる要素であれば装飾が適用されます。

A[属性名*="文字列"] 「属性値が指定の文字列を含む要素A」

　=（イコール）の前に *（アスタリスク）を記述すると、指定の文字列を含む属性値を持っている要素に装飾が付加されます。

<p>class 無し</p>
<p class="red001">class 有り red001</p>
<p class="red002">class 有り red002</p>
<p class="red003">class 有り red003</p>
<p class="red010">class 有り red010</p>

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

　たとえば上記のように記述したときは、classの属性値に 00 の文字列がある要素であれば装飾が適用されますので、一桁の番号だけといった指定が可能となります。