属性値セレクター II
Coddyの「CSSセレクター」コースのレッスン 14/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属性値が"-tertiary"で終わるボタンを選択します */
[class$="-tertiary"] {
background-color: lightcoral;
}提供されたコード例では:
- 3つのボタンが異なるclass属性値で定義されています。
- CSSルールの
[class$="-tertiary"]は、class属性値が"-tertiary"で終わる要素をターゲットにします。これらのボタンにbackground-color: lightcoral;スタイルを適用します。
その結果、class属性値が"btn-tertiary"であるボタンの背景色はライトコーラルになります。
チャレンジ
簡単ウェブページ上の音楽トラックのリストが与えられています。各トラックは、その形式（例: "mp3"、"wav"、"flac"）を示す data-track 属性を持つ <div> 要素で表されます。あなたのタスクは、属性値の後方一致セレクタを使用して、形式に基づいてトラックを異なるスタイルに設定することです。
あなたのCSSのタスクは以下の通りです：
data-track属性値が "mp3" で終わるトラックに、独自の背景を設定してください。data-track属性値が "wav" で終わるトラックに、独自の背景を設定してください。data-track属性値が "flac" で終わるトラックに、独自の背景を設定してください。
自分で試してみよう
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Tracks</title>
<style>
/* Your CSS code here */
</style>
</head>
<body>
<div data-track="a-mp3">Track 1 (MP3)</div>
<div data-track="a-wav">Track 2 (WAV)</div>
<div data-track="a-flac">Track 3 (FLAC)</div>
<div data-track="b-mp3">Track 4 (MP3)</div>
</body>
</html>