属性セレクタ（attribute selector）
アセンブラの魔女 ⧫ CSS ⧫ セレクタ ⧫ セレクタの種類 ⧫ 属性セレクタ

　属性セレクタ（attribute selector）は、要素の属性を指定してスタイルの適用領域とするセレクタです。

　属性値に関わらず指定した属性を持つ要素にスタイルを適用します。

E[foo]

　次のCSSコードはtitle属性を持つh1タグにスタイルを適用します。

body        {black;}
h1[title]   { color: blue; }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>属性のセレクタの使用例</title>
<meta name="description" content="属性セレクタの使用例です" />
<meta http-equiv="Content-Style-type" content="text/css">
<link rel="stylesheet" href="attribute_selector_sample.css" type="text/css">
</head>
<body>
<H1>h1-1</H1>
<H1 title="タイトル">h1-2</H1>
</body>
</html>

　指定した属性値を持つ要素にスタイルを適用します。

E[foo=val]

　次のCSSコードはclass属性値がexampleのspanタグ（つまりexampleクラスのspanタグ）にスタイルを適用します。

body		{black;}
.example	{font-size:25px;}
span[class=example] { color: blue; }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>属性のセレクタの使用例</title>
<meta name="description" content="属性セレクタの使用例です" />
<meta http-equiv="Content-Style-type" content="text/css">
<link rel="stylesheet" href="attribute_selector_sample2.css" type="text/css">
</head>
<body>
<span>span</span>　<span class="example">span class=example</span>　

</body>
</html>

　指定した属性値と要素の属性値が完全に一致、または要素の属性値が半角スペースで区切られた文字列であり、その部分文字列の一つが指定した属性値に一致する場合にスタイルを適用します。

E[foo~=val]

　次のCSSコードでは属性値が"test"であるか、半角スペースで区切られた属性値の部分文字列の一つが"test"である要素にスタイルを適用します。このサンプル（HTML）では、 title属性が"ex-1 test"であるspan要素に適用されます。

body		{black;}
span[title~="test"] { color: blue; }





属性のセレクタの使用例





span　
ex-1　
ex-1 test　

　指定した属性値と要素の属性値が完全に一致、または要素の属性値が指定した属性値で始まり、その後に'-'(U+002D)が続く場合にスタイルを適用します。

E[foo|=val]

　次のサンプルではclass属性値がexで始まるspanタグ（ex-1-aクラスとex-1-bクラスのHTML）にスタイルを適用します。

body		{black;}
.ex-1-a		{font-size:25px;}
.ex-1-b		{font-size:30px;}
span[class|=ex] { color: blue; }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>属性のセレクタの使用例</title>
<meta name="description" content="属性セレクタの使用例です" />
<meta http-equiv="Content-Style-type" content="text/css">
<link rel="stylesheet" href="attribute_selector_sample3.css" type="text/css">
</head>
<body>
<span>span</span>　
<span class="ex-1-a">span class=ex-1-a</span>　
<span class="ex-1-b">span class=ex-2-b</span>　
</body>
</html>

　セレクタには複数の属性を指定することもできます。

　次のCSSコードの2行目では、title属性が"kawahagi"であるimg要素のwidth属性を400に設定しています。3行目ではtitle属性が"ika"でalt属性の（スペース区切りの）部分文字列が"sample"であるimg要素のwidth属性を300に設定します。

body                            {black;}
img[title="kawahagi"]           { width: 400; }
img[title="ika"][alt~="sample"] { width: 300; }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>属性のセレクタの使用例</title>
<meta name="description" content="属性セレクタの使用例です" />
<meta http-equiv="Content-Style-type" content="text/css">
<link rel="stylesheet" href="attribute_selector_sample5.css" type="text/css">
</head>
<body>
<span>span</span>　
<span title="ex-1">ex-1</span>　
<span title="ex-1 test">ex-1 test</span>　
<img src="https://books-nekoya.jp/wiredFish.png" title="logo">
<img src="https://books-nekoya.jp/Fishing/hato/photo/161203-urasoko-1-xs.jpg" title="aji">
<img src="https://books-nekoya.jp/Fishing/hato/photo/161203-miyanoura-1-xs.jpg" title="kawahagi" alt="attribute selector">
<img src="https://books-nekoya.jp/Fishing/hato/photo/161203-kannon-2-xs.jpg" title="ika" alt="sample for attribute selector">
</body>
</html>
▼ Property