属性値セレクター
Coddyの「CSSセレクター」コースのレッスン 13/15。
このレッスンでは、属性値の前方一致セレクターの概念について深く掘り下げます。この手法を使用すると、属性値の開始文字に基づいてHTML要素をターゲットにすることができます。
属性値の前方一致セレクターの構文:
特定の文字列で始まる属性値を持つ要素をターゲットにするには、[attribute^="value"] セレクター構文を使用します。
コード例:
HTML:
<button class="btn-primary">Primary Button</button>
<button class="btn-secondary">Secondary Button</button>
<button class="btn-tertiary">Tertiary Button</button>CSS:
/* class属性値が "btn-" で始まるボタンを選択します */
[class^="btn-"] {
background-color: lightgray;
}提供されたコード例では：
- 異なるclass属性値を持つ3つのボタンが定義されています。
- CSSルール
[class^="btn-"]は、"btn-" で始まるclass属性値を持つ要素をターゲットにします。これにより、これらのボタンにbackground-color: lightgray;スタイルが適用されます。
その結果、3つのボタンすべてのclass属性値が "btn-" で始まっているため、すべてのボタンの背景色がライトグレーになります。
チャレンジ
簡単アイテムのリストに対して、次のようなHTML構造があると想像してください。あなたの目標は、"fruit-" で始まる特定の data-category 属性値を持つリストアイテムにスタイルを適用することです。CSSを使用して、これらのリストアイテムに独自の背景色を適用してください。
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<title>Attribute Value Starting With Selector</title>
<style>
/* Your CSS code here */
</style>
</head>
<body>
<ul>
<li data-category="fruit-apple">Apple</li>
<li data-category="vegetable-carrot">Carrot</li>
<li data-category="fruit-banana">Banana</li>
<li data-category="fruit-orange">Orange</li>
<li data-category="grain-rice">Rice</li>
</ul>
</body>
</html>