属性値セレクター III
Coddyの「CSSセレクター」コースのレッスン 15/15。
このレッスンでは、属性値に特定の文字列が含まれている要素を選択するセレクターの概念について学びます。この手法を使用すると、属性値に特定のサブストリングが含まれているかどうかに基づいて、HTML要素をターゲットにすることができます。
属性値を含むセレクターの構文:
特定の文字列を含む属性値を持つ要素をターゲットにするには、[attribute*="value"] セレクター構文を使用します。
コード例:
HTML:
<div class="tag fruit">Apple</div>
<div class="tag vegetable">Carrot</div>
<div class="tag fruit">Banana</div>
<div class="tag fruit">Orange</div>
<div class="tag grain">Rice</div>CSS:
/* Selects <div> elements with class attribute values containing "fruit" */
[class*="fruit"] {
color: green;
}コード例の説明:
提供されたコード例では：
- 5つの
<div>要素が、異なる class 属性値で定義されています。 - CSSルールの
[class*="fruit"]は、class属性値に "fruit" というサブストリングを含む要素をターゲットにします。これらの要素にcolor: green;スタイルを適用します。
その結果、class 属性が "tag fruit" である <div<strong>></strong> 要素のテキストの色が緑色になります。
チャレンジ
簡単ウェブページ上の製品リストのスタイルを設定するタスクが課せられています。各製品は、そのタグ（例: "electronics"、"clothing"、"accessories"）を示す data-tags 属性を持つ <div> 要素で表されます。あなたの目標は、属性値を含むセレクターを使用して、タグに基づいて製品を異なるスタイルに設定することです。
CSSのタスクは以下の通りです：
data-tags属性に "electronics" を含む製品に、独自の背景色を設定してください。data-tags属性に "clothing" を含む製品に、独自のボーダーを設定してください。data-tags属性に "accessories" を含む製品に、独自の背景色を設定してください。
自分で試してみよう
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product List</title>
<style>
/* Your CSS code here */
</style>
</head>
<body>
<div data-tags="electronics">Smartphone</div>
<div data-tags="clothing">T-Shirt</div>
<div data-tags="accessories">Sunglasses</div>
<div data-tags="electronics clothing">Headphones</div>
</body>
</html>