6.1 属性セレクターの種類
CSS属性セレクターは、属性の存在、値、または値の一部に基づいて要素を選択できるんだ。これはHTML要素をスタイリングする上で柔軟で強力な機能を提供してくれるよ。特に動的コンテンツやインタラクティブなウェブページを扱うときに便利だね。
属性セレクターの種類
- 属性セレクター (Attribute Selector)
- 値を持つ属性セレクター (Attribute Selector with Value)
- 特定の値で始まる属性セレクター (Attribute Selector with Prefix)
- 特定の値で終わる属性セレクター (Attribute Selector with Suffix)
- 値を含む属性セレクター (Attribute Selector with Substring)
- 空白で区切られた値を持つ属性セレクター (Attribute Selector with Whitespace)
- ハイフンで区切られた値を持つ属性セレクター (Attribute Selector with Hyphen)
6.2 属性セレクター
属性セレクターは特定の属性を持つ要素を選択するためのものだよ。その値は気にしないんだ。
構文:
[属性] {
プロパティ: 値;
プロパティ: 値;
}
例:
CSS
/* title属性を持つすべての要素を選択 */
[title] {
color: blue;
}
HTML
<p title="これはタイトル">このテキストは青になります。</p>
<p>このテキストは青にはなりません。</p>
6.3 値を持つ属性セレクター
値を持つ属性セレクターは、特定の値を持つ属性を持つ要素を選択するためのものだね。
構文:
[属性="値"] {
プロパティ: 値;
プロパティ: 値;
}
例:
CSS
/* title属性が"例"の要素を選択 */
[title="例"] {
color: green;
}
HTML
<p title="例">このテキストは緑になります。</p>
<p title="別の例">このテキストは緑になりません。</p>
6.4 特定の値で始まる属性セレクター
特定の値で始まる属性セレクターは、属性の値が指定された値で始まる要素を選択するよ。
構文:
[属性^="値"] {
プロパティ: 値;
プロパティ: 値;
}
例:
CSS
/* title属性が"開始"で始まる要素を選択 */
[title^="開始"] {
color: red;
}
HTML
<p title="開始のテキスト">このテキストは赤になります。</p>
<p title="開始ではない">このテキストは赤にはなりません。</p>
6.5 特定の値で終わる属性セレクター
特定の値で終わる属性セレクターは、属性の値が指定された値で終わる要素を選択するよ。
構文:
[属性$="値"] {
プロパティ: 値;
プロパティ: 値;
}
例:
CSS
/* title属性が"終わり"で終わる要素を選択 */
[title$="終わり"] {
color: orange;
}
HTML
<p title="これが終わり">このテキストはオレンジ色になります。</p>
<p title="これが始まり">このテキストはオレンジ色にはなりません。</p>
6.6 値を含む属性セレクター
値を含む属性セレクターは、属性の値が指定された値を含む要素を選択するんだ。
構文:
[属性*="値"] {
プロパティ: 値;
プロパティ: 値;
}
例:
CSS
/* title属性が"中央"を含む要素を選択 */
[title*="中央"] {
color: purple;
}
HTML
<p title="これは中央のテキスト">このテキストは紫色になります。</p>
<p title="ここには中央がありません">このテキストは紫色にはなりません。</p>
6.7 空白区切りがある属性セレクター
空白区切りがある属性セレクターは、空白で区切られた1つまたは複数の値を持つ属性を選択するよ。特定のクラスや役割を持つ要素を選択するのに便利だね。
構文:
[属性~="値"] {
プロパティ: 値;
プロパティ: 値;
}
例:
CSS
/* class属性が"highlight"を含む要素を選択 */
[class~="highlight"] {
background-color: yellow;
}
HTML
<p class="highlight special">このテキストは黄色の背景になります。</p>
<p class="special highlight">このテキストも黄色の背景になります。</p>
<p class="special">このテキストは黄色の背景にはなりません。</p>
6.8 ハイフンで区切られた属性セレクター
ハイフン区切りの属性セレクターは、指定された値を含むか、その値で始まり、その後にハイフンを持つ属性を選択するんだ。
構文:
[属性|="値"] {
プロパティ: 値;
プロパティ: 値;
}
例:
CSS
p[lang|="ru"] {
font-style: italic;
}
HTML
<p lang="ru">このテキストは斜体になります。</p>
<p lang="ru-RU">このテキストも斜体になります。</p>
<p lang="en">このテキストは斜体にはなりません。</p>
GO TO FULL VERSION