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

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

目次

1.要素名[属性名]

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

コード

2行目は、[属性名]としています。(※)
8行目は、指定の属性があるのでCSSが適用されます。
9行目は、CSSが適用されません。
(※)>は子セレクタで対象を絞っています。(#test1)の子要素を対象とする。

<style>
#test1 > [class]{
	color:red;
}
</style>
<body >
<div id="test1">
	<p class="p1">あいうえお1</p>
	<p>あいうえお2</p>
</div>
</body>

サンプル

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

あいうえお1

あいうえお2

2.要素名[属性名="値"]

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

コード

2行目は、要素名[属性名="値"]としています。
8行目は、指定の属性の値があるのでCSSが適用されます。
9行目は、CSSが適用されません。

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

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

</body>

サンプル

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

あいうえお1

あいうえお2

3.要素名[属性名~="値"]

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

コード

2行目は、要素名[属性名~="値"]としています。
5行目は、比較するため、要素名[属性名~="値"]としていません。
11行目は、指定の属性の値のひとつに合致するのでCSSが適用されます。
12行目は、CSSは適用されません。(5行目はチルダ(~)がないため)

<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>

サンプル

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

あいうえお

あいうえお

4.要素名[属性名|="値"]

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

コード

2行目は、要素名[属性名|="値"]としています。
8行目は、指定の属性の文字で始まっているのでCSSが適用されます。
9行目は、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

5.要素名[属性名^="値"]

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

コード

2行目は、要素名[属性名^="値"]としています。
8行目は、指定の属性の値の文字で始まっているのでCSSが適用されます。
9行目は、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>

サンプル

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

6.要素名[属性名$="値"]

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

コード

2行目は、要素名[属性名$="値"]としています。
8行目は、指定の属性の値の文字で終わっているのでCSSが適用されます。
9行目は、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>

サンプル

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

7.要素名[属性名*="値"]

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

コード

2行目は、要素名[属性名*="値"]としています。
8行目は、指定の属性の値が含まれているのでCSSが適用されます。
9行目は、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

関連の記事

CSS セレクタの一覧
CSS セレクタを組み合わせて使うサンプル(子孫/子/隣接/一般兄弟セレクタ)
CSS 複数のセレクタを指定する/絞り込むサンプル
CSS 疑似クラスのサンプル(:link/:visited/:hover/:active/:focus/:target/:lang/:enabled/:disabled/:checked)
CSS 疑似クラスのサンプル(:nth-child/:nth-last-child/:empty/:not)
CSS 疑似要素のサンプル(::first-line/::first-letter/::before/::after)




△上に戻る