CSS 属性セレクタのサンプル(要素名[属性名=”値”])

CSSの属性セレクタのサンプルです。

１．要素名[属性名]
２．要素名[属性名="値"]
３．要素名[属性名~="値"]
４．要素名[属性名|="値"]
５．要素名[属性名^="値"]
６．要素名[属性名$="値"]
７．要素名[属性名*="値"]

１．要素名[属性名]

指定の属性がある要素にCSSを適用します。

コード

2行目は、pが要素でclassが属性です。12-14行目を対象にします。
6行目は、typeは属性です。属性のみ指定しています。16-17行目を対象にします。

<style>
p[class]{
	color:blue;
}

[type]{
	color:red;
}
</style>
<body >

<p class="p1">あいうえお</p>
<p class="p2">かきくけこ</p>
<p class="p3">さしすせそ</p>

<input type="button" id="b1" value="ボタン" />
<input type="button" id="b2" value="ボタン" />

</body>

サンプル

上記コードの実行イメージです。

２．要素名[属性名="値"]

指定の属性の値がある要素にCSSを適用します。

コード

2行目は、pが要素でclassが属性でp21が値です。8行目を対象にします。
9行目は、値が異なるのでCSSは適用されません。

<style>
p[class="p21"]{
	color:blue;
}
</style>
<body >

	<p class="p21">あいうえお1</p>
	<p class="p22">あいうえお2</p>

</body>

サンプル

上記コードの実行イメージです。

あいうえお1

あいうえお2

３．要素名[属性名~="値"]

属性の値が複数ある場合で、指定の属性の値がどれかひとつに合致する要素にCSSを適用します。

コード

2行目は、pが要素でclassが属性でp32が値です。11行目は3つの値の中にp32があるので対象にします。
5行目は、比較のため、要素名[属性名~="値"]としていません。そのため12行目は値のp34がありますが、対象になりません。12行目の値がp34のみであれば対象になります。

<style>
p[class~="p32"]{
	color:blue;
}
p[class="p34"]{
	color:green;
}
</style>
<body >

	<p class="p31 p32 p33">あいうえお</p>
	<p class="p33 p34 p35">あいうえお</p>

</body>

サンプル

上記コードのサンプルです。

あいうえお

４．要素名[属性名|="値"]

ハイフン(-)で区切られた属性の値が複数ある場合で、指定の属性の値で始まっている要素にCSSを適用します。
一般的にlang属性で使用されます。

コード

2行目は、pが要素でlangが属性でenが値です。8行目のlang属性は、指定の値で始まっているのでCSSが適用されます。
9行目のlang属性は、指定の値で始まっていないのでCSSが適用されません。

<style>
p[lang|="en"] {
	color: red;
}
</style>
<body >

	<p lang="en-us en-gb en-au">テスト41</p>
	<p lang="zh-CN zh-TW">テスト42</p>

</body>

サンプル

上記コードのサンプルです。

テスト41

テスト42

５．要素名[属性名^="値"]

指定の属性の値で始まる要素にCSSを適用します。

コード

2行目は、inputが要素でnameが属性でabcが値です。8行目のname属性は、指定の値で始まっているのでCSSが適用されます。
9行目のname属性は、指定の値で始まっていないのでCSSが適用されません。

<style>
input[name^="abc"]{
	 background-color:LightSkyBlue;
}
</style>
<body >

	<input type="text" name="abc123" value="t51" maxlength="5">
	<input type="text" name="xyz123" value="t52" maxlength="5">

</body>

サンプル

上記コードのサンプルです。

６．要素名[属性名$="値"]

指定の属性の値で終わる要素にCSSを適用します。

コード

2行目は、inputが要素でnameが属性で789が値です。8行目のname属性は、指定の値で終わっているのでCSSが適用されます。
9行目のname属性は、指定の値で終わっていないのでCSSが適用されません。

<style>
input[name$="789"]{
	 background-color:LightSkyBlue;
}
</style>
<body >

	<input type="text" name="xyz789" value="t61" maxlength="5">
	<input type="text" name="xyz123" value="t62" maxlength="5">

</body>

サンプル

上記コードのサンプルです。

７．要素名[属性名*="値"]

指定の属性の値が含まれている要素にCSSを適用します。

コード

2行目は、inputが要素でnameが属性でefが値です。8行目のname属性は、指定の属性の値が含まれているのでCSSが適用されます。
9行目のname属性は、指定の属性の値が含まれていないのでCSSが適用されません。

<style>
input[name*="ef"]{
	background-color:LightSkyBlue;
}
</style>
<body >

	<input type="tpt" name="def567" value="t71" maxlength="5">
	<input type="tpt" name="hij345" value="t72" maxlength="5">

</body>

サンプル

上記コードのサンプルです。

リンク

以下はMDNの属性セレクタのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors