CSS属性セレクターでdata-*を使う
data属性の値に応じて要素を条件付きでスタイルします
「CSS属性セレクターでdata-*を使う」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
CSS属性セレクター
CSS属性セレクターは、属性の有無と値に基づいて要素を照合します。[data-state]はdata-state属性を持つすべての要素に一致し、[data-state="active"]は値が"active"と等しい場合にのみ一致します。
存在セレクター
[data-tooltip]は、値に関係なくdata-tooltip属性を持つ要素に一致します。ツールチップの内容を考慮する前に、ツールチップのデータが付加されたすべての要素へ基本スタイルを適用する場合に使用します。
完全一致セレクター
[data-theme="dark"]は、data-themeが正確に"dark"と等しい要素にのみ一致します。JavaScriptによってhtml要素にdata-theme="dark"が設定されている場合に暗い色のトークンを適用するなど、テーマに応じたスタイル設定に利用できます。
部分一致セレクター
[data-icon^="arrow"]は、"arrow"で始まる値に一致します。[data-label$="ing"]は、"ing"で終わる値に一致します。[data-tag*="feature"]は、"feature"を含む値に一致します。これらを使うと、多数のクラスを追加せずにパターンに基づくスタイル設定ができます。
data-*によるステートマシン
data-state属性を使ってコンポーネントの状態をモデル化します: [data-state="idle"]、[data-state="loading"]、[data-state="error"]。状態ごとのCSSルールにより、複数の条件付きクラス名を置き換えられます。状態を1つの属性にまとめ、スタイルも明確に分離できます。
[data-state="loading"] .spinner { display: block; }
[data-state="error"] .message { color: var(--color-error); }属性セレクターの詳細度
属性セレクターの詳細度はクラスセレクターと同じです (0,1,0)。要素セレクターと組み合わせると、button[data-variant="primary"]の詳細度は(0,1,1)になります。競合を避けるため、クラスベースのルールと合わせて属性セレクターの詳細度も計画してください。
ツールチップのパターン
data-tooltipを使う純粋なCSSツールチップでは、ホバー時に::after { content: attr(data-tooltip) }を適用します。content: attr()関数は属性値を読み取り、疑似要素のコンテンツとして使用します。JavaScriptや追加のHTML要素は必要ありません。
[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
background: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
}スタイル設定におけるdata-*とclassの使い分け
スタイルの意図（is-active、has-error）にはクラスを使用し、データの内容（data-user-id、data-count）にはデータ属性を使用します。同じ属性を挙動（JSが読み取る）とスタイル設定（CSSが選択する）の両方に使用する場合、data-*によってJSとCSS間の重複をなくせます。
data-*セレクターの組み合わせ
複数の属性セレクターを連結します: [data-type="button"][data-size="large"]は、両方の属性が設定された要素に一致します。これにより、.button-largeのような複合クラスを作らずに複合条件で照合でき、クラスの増加を抑えられます。
パフォーマンスに関する注意
属性セレクターは、スタイルの解決時にクラスセレクターよりわずかに低速です。静的なスタイルにはクラスを優先してください。data-stateやdata-themeのように属性値がスタイルを決定し、実行時に変更される場合は属性セレクターを使用します。この場合、1つの属性で複数の切り替え対象クラスを置き換えられます。
大文字と小文字の区別
デフォルトでは、HTMLにおける属性値の照合で大文字と小文字が区別されます（ただし、XHTMLの言語コードでは区別されません）。大文字と小文字を区別しない照合にはiフラグを追加します: [data-state="Active" i]は"active"、"Active"、"ACTIVE"に一致します。
確認問題
CSSセレクター[data-state="loading"] .spinnerは何を行いますか?
まとめ
CSS属性セレクターは、data-*属性の有無、完全一致する値、または部分一致するパターンによって要素を照合します。ツールチップのcontent: attr()やコンポーネントのステートマシンにおけるdata-stateと組み合わせることで、data-*属性をデータの受け渡しとCSSのスタイルフックの両方に利用でき、クラスの増加を避けられます。
よくある質問
「CSS属性セレクターでdata-*を使う」レッスンは無料ですか？
はい。「CSS属性セレクターでdata-*を使う」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「CSS属性セレクターでdata-*を使う」で何を学びますか？
data属性の値に応じて要素を条件付きでスタイルします ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「CSS属性セレクターでdata-*を使う」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- data-*の構文と命名規則
- JavaScriptのdatasetでdata-*にアクセスする
- CSS属性セレクターでdata-*を使う
- 実践パターン：ツールチップと状態管理