目次
使用例
CSS
h2[title="caption2"] {
color: red;
}HTML（抜粋）
<h1 title="caption1">見出し</h1>
<p title="paragraph1">本文</p>
<h2 title="caption2">小見出し</h2>
<p title="paragraph2">本文2</p>表示結果
- この例では「title属性値が”caption2″であるh2要素の文字色を赤色にする」という指定をしています。
構文・説明
- 属性セレクタは、HTMLの属性名と属性値を指定するセレクタです。
- 属性セレクタの属性名の指定は必須で属性値の指定は任意です。
- 属性セレクタの属性値指定方法は複数あります。
-
それぞれの具体的な指定方法については、以降で説明をします。説明の中にある構文の見方については以下のとおりです。
- Eの部分に「ユニバーサルセレクタ」もしくは「タイプセレクタ」を記述します。
- Eの部分は「ユニバーサルセレクタ」の場合に限り、省略することが可能です。
- nameの部分に「指定対象の属性名」を記述します。
- valueの部分に「指定対象の属性値」を記述します。
属性値 – 指定なし
構文
E[name] {
property_name: property_value;
}- 構文の見方については、章の先頭の説明を参照してください。
- 適用対象は、name属性を持つ要素です。属性値に対して条件はありません。
CSS
[title] {
color: red;
}HTML（抜粋）
<h1 title="caption1">見出し</h1>
<p title="paragraph1">本文</p>
<h2 title="caption2">小見出し</h2>
<p title="paragraph2">本文2</p>表示結果
- 上記の例では「title属性を持つ要素の文字色を赤色にする」という指定をしています。
属性値 – 完全一致
構文
E[name="value"] {
property_name: property_value;
}- 構文の見方については、章の先頭の説明を参照してください。
- 適用対象は、name属性値がvalueである要素です。
CSS
[title="caption1"] {
color: red;
}HTML（抜粋）
<h1 title="caption1">見出し</h1>
<p title="paragraph1">本文</p>
<h2 title="caption2">小見出し</h2>
<p title="paragraph2">本文2</p>表示結果
- 上記の例では「title属性値が”caption1″である要素の文字色を赤色にする」という指定をしています。
- title属性値が”caption1“以外である要素の文字色が赤色になっていないという点がポイントです。
属性セレクタ（id属性）例
[id="title"] {
color: red;
}IDセレクタ例
#title {
color: red;
}- id属性の属性セレクタ（属性値が完全一致）は、[link-css-reference-selector-id]に置き換えることができます。
- 上記の「属性セレクタ（id属性）例」と「IDセレクタ例」の適用対象は同じになります。
属性値 – 半角スペース区切りで一致
構文
E[name~="value"] {
property_name: property_value;
}- 構文の見方については、章の先頭の説明を参照してください。
- 適用あは、name属性値の中で半角スペースで区切ったいずれかの値にvalueがある要素です。
CSS
[title~="first"] {
color: red;
}HTML（抜粋）
<h1 title="caption1 first">見出し</h1>
<p title="paragraph1 first">本文</p>
<h2 title="caption2 second">小見出し</h2>
<p title="paragraph2 second">本文2</p>表示結果
- 上記の例では「title属性値の中で半角スペースで区切ったいずれかの値に”first”がある要素の文字色を赤色にする」という指定をしています。
- 文字色が赤色になっている要素のtitle属性値が”caption1 first“と”paragraph1 first“で異なるにもかかわらず、半角スペースで属性値を区切った場合、どちらにも”first“が含まれてるという点がポイントです。
属性セレクタ（class属性）例
[class~="warning"] {
color: red;
}クラスセレクタ例
.warning {
color: red;
}- class属性の属性セレクタ（属性値が半角スペース区切りで一致）は、[link-css-reference-selector-class]に置き換えることができます。
- 上記の「属性セレクタ（class属性）例」と「クラスセレクタ例」の適用対象は同じになります。
属性値 – 前方一致
構文
E[name^="value"] {
property_name: property_value;
}- 構文の見方については、章の先頭の説明を参照してください。
- 適用対象は、name属性値がvalueで始まる要素です。
CSS
[title^="caption"] {
color: red;
}HTML（抜粋）
<h1 title="caption1">見出し</h1>
<p title="paragraph1">本文</p>
<h2 title="caption2">小見出し</h2>
<p title="paragraph2">本文2</p>表示結果
- 上記の例では「title属性値が”caption”で始まる要素の文字色を赤色にする」という指定をしています。
- 文字色が赤色になっている要素のtitle属性値が”caption1“と”caption2“で異なるにもかかわらず、どちらも”caption“で始まっているという点がポイントです。
属性値 – 後方一致
構文
E[name$="value"] {
property_name: property_value;
}- 構文の見方については、章の先頭の説明を参照してください。
- 適用対象は、name属性値がvalueで終わる要素です。
CSS
[title$="2"] {
color: red;
}HTML（抜粋）
<h1 title="caption1">見出し</h1>
<p title="paragraph1">本文</p>
<h2 title="caption2">小見出し</h2>
<p title="paragraph2">本文2</p>表示結果
- 上記の例では「title属性値が”2″で終わる要素の文字色を赤色にする」という指定をしています。
- 文字色が赤色になっている要素のtitle属性値が”caption2“と”paragraph2“で異なるにもかかわらず、どちらも”2“で終わっているという点がポイントです。
属性値 – 部分一致
構文
E[name*="value"] {
property_name: property_value;
}- 構文の見方については、章の先頭の説明を参照してください。
- 適用対象は、name属性値の中にvalueが含まれている要素です。
CSS
[title*="graph"] {
color: red;
}HTML（抜粋）
<h1 title="caption1">見出し</h1>
<p title="paragraph1">本文</p>
<h2 title="caption2">小見出し</h2>
<p title="paragraph2">本文2</p>表示結果
- 上記の例では「title属性値の中に”graph”という文字列が含まれている要素の文字色を赤色にする」という指定をしています。
- 文字色が赤色になっている要素のtitle属性値には、どちらも”graph“という文字列が含まれているという点がポイントです。
属性値 – ハイフン区切りで先頭一致
構文
E[name|="value"] {
property_name: property_value;
}- 構文の見方については、章の先頭の説明を参照してください。
- 適用対象は、name属性値がvalueである要素、もしくはname属性値をハイフンで区切った時の先頭（最初）の値がvalueである要素です。
CSS
[title|="caption"] {
color: red;
}HTML（抜粋）
<h1 title="caption1">見出し</h1>
<p title="paragraph1">本文</p>
<h2 title="caption-2">小見出し</h2>
<p title="paragraph2">本文2</p>表示結果
- 上記の例では「title属性値が”caption”である要素、もしくはname属性値をハイフンで区切った時の先頭（最初）の値が”caption”である要素の文字色を赤色にする」という指定をしています。
