CSS属性セレクタの値指定を使いこなす！基本から応用までの記述ルールと活用テクニック

2026年5月11日

セレクタ

モダンなWeb開発において、HTMLの構造を美しく保ちながら精密なスタイリングを実現することは極めて重要です。

CSSの属性セレクタは、クラス名やIDだけに頼ることなく、要素の属性やその「値」の状態に基づいてスタイルを適用できる強力な武器となります。

特に2026年のフロントエンド開発では、データ属性やアクセシビリティ属性を活用した動的なコンポーネント管理が主流となっています。

属性セレクタの値を自由自在に操ることができれば、コードの記述量を減らしつつ、メンテナンス性の高いスタイルシートを作成することが可能です。

本記事では、基本的な一致条件から、実務で役立つ応用的な値指定のテクニックまでを詳しく解説していきます。

これから紹介する記述ルールをマスターして、一歩進んだCSS設計のスキルを身につけましょう。

目次 [ close ]

属性セレクタとは何か？その基本構造を理解する

属性セレクタとは、HTML要素が持つ特定の属性や、その属性に含まれる値に基づいて対象を選択する仕組みです。

基本的な構文は、要素名の後ろに角括弧（[]）を記述し、その中に属性名を指定する形をとります。

例えば、[type]と記述すれば、type属性を持つすべての要素がスタイルの適用対象となります。

しかし、実際の開発では「特定の属性を持っていること」だけでなく、その属性がどのような値を持っているかを条件にしたい場面が多くあります。

属性値の指定方法には多くのバリエーションがあり、それぞれ一致の条件が厳密に定義されています。

これらを使い分けることで、特定のリンクやフォーム要素、独自のデータを持つコンポーネントを正確にターゲットできます。

属性値の指定方法を正しく理解することは、CSSセレクタの表現力を最大限に引き出す鍵となります。

まずは、最も基本的でありながら頻繁に使用される「完全一致」の指定から見ていきましょう。

基本的な値の指定方法と各演算子の使い分け

属性セレクタで値を指定する際、イコールの前に特定の記号を置くことで、一致の条件を変更できます。

これらを演算子と呼びます。

[attr=”value”] 完全一致による指定

最もシンプルなのが、属性値が指定した文字列と完全に一致する場合のみスタイルを適用する方法です。

以下のコード例では、type属性が「text」である入力フィールドのみにスタイルを適用しています。

CSS

/* type属性が完全に"text"の要素のみを指定 */
input[type="text"] {
    border: 2px solid #007bff;
    padding: 8px;
    border-radius: 4px;
}

実行結果

type="text" を持つinput要素の枠線が青色になり、余白が適用されます。
type="password" や type="email" の要素には適用されません。

この指定方法は、フォームの部品ごとにデザインを細かく分けたい場合に非常に有効です。

[attr~=”value”] 単語単位での一致指定

~=という演算子を使用すると、属性値が半角スペースで区切られたリスト形式である場合、その中のいずれかの単語が一致するかを判定します。

これは、一つの属性に複数の値を記述することがある独自の属性などで役立ちます。

CSS

/* data-category属性に "news" という単語が含まれている要素を指定 */
[data-category~="news"] {
    background-color: #fff3cd;
    font-weight: bold;
}

実行結果

data-category="news update" や data-category="hot news" と記述された要素がヒットします。
data-category="newsletter" のように、単語の一部として含まれている場合はヒットしません。

クラス名のような挙動を独自の属性で行いたい場合に適した指定方法です。

[attr|=”value”] 言語コードや接頭辞での一致指定

|=は、属性値が指定した値そのものであるか、または指定した値の直後にハイフン（-）が続く場合に一致します。

主にlang属性での言語指定などに使用される特殊なセレクタです。

CSS

/* lang属性が "en" または "en-" で始まる要素を指定 */
p[lang|="en"] {
    font-family: "Helvetica", sans-serif;
}

実行結果

lang="en"、lang="en-US"、lang="en-GB" のすべてにスタイルが適用されます。

部分一致による柔軟な要素の絞り込み

2026年のWeb制作現場では、動的に生成されるIDや複雑なURLを扱う機会が増えています。

そのような場合に重宝するのが、文字列の一部が一致しているかどうかを判定する部分一致セレクタです。

[attr^=”value”] 前方一致（先頭の文字列）での指定

ハット記号（^）を使用すると、属性値が指定した文字列から始まっている要素を選択できます。

外部サイトへのリンクに対して自動的にアイコンを表示させるような実装でよく使われます。

CSS

/* href属性が "https://" で始まるリンクを指定 */
a[href^="https://"] {
    color: #1a73e8;
    text-decoration: underline;
}

/* 特定のディレクトリ内の画像をターゲットにする */
img[src^="/assets/images/icons/"] {
    width: 24px;
    height: 24px;
}

実行結果

外部リンク（httpsから始まるURL）のみが青色になり、アイコン画像がサイズ調整されます。

「特定のプロトコルやパスで始まるもの」を対象にしたい場合に最適です。

[attr$=”value”] 後方一致（末尾の文字列）での指定

ドル記号（$）を使用すると、属性値が指定した文字列で終わっている要素を選択できます。

ファイル拡張子に基づいてスタイルを出し分ける際に非常に便利です。

CSS

/* href属性が ".pdf" で終わるリンクにアイコンを追加 */
a[href$=".pdf"]::after {
    content: " (PDF)";
    font-size: 0.8em;
    color: #d93025;
}

/* .zipファイルへのダウンロードリンクを強調 */
a[href$=".zip"] {
    font-weight: bold;
    border-bottom: 2px dashed #34a853;
}

実行結果

PDFファイルへのリンクの後ろに赤い「 (PDF)」という文字が表示されます。

[attr*=”value”] 部分一致（任意の場所の文字列）での指定

アスタリスク（*）を使用すると、属性値のどこかに指定した文字列が含まれている要素をすべて選択できます。

最も柔軟性が高く、特定のキーワードを含む要素をまとめて操作したいときに使用します。

CSS

/* src属性のどこかに "gallery" という文字を含む画像を指定 */
img[src*="gallery"] {
    border: 3px solid #fbbc05;
    transition: transform 0.3s;
}

実行結果

/images/gallery/photo1.jpg や /user/gallery-view/item.png などがすべて対象になります。

大文字・小文字を区別しない「i」フラグの活用

属性セレクタのデフォルトの挙動では、属性値の大文字と小文字は厳密に区別されます。

しかし、ユーザーが入力した値や、生成されるURLによって大文字小文字が混在するケースもあります。

そのような場合に便利なのが、属性セレクタの閉じ括弧の直前に「i」を記述するフラグ設定です。

CSS

/* 大文字小文字を問わず、拡張子が ".jpg" のものを指定 */
img[src$=".jpg" i] {
    opacity: 0.9;
}

実行結果

example.jpg も example.JPG も同一に扱われ、スタイルが適用されます。

逆に、厳密に区別させたいことを明示するための「s」フラグも存在しますが、通常はデフォルトの状態か「i」フラグの利用が一般的です。

「i」フラグ（case-insensitive）を添えるだけで、予期せぬスタイルの適用漏れを防ぐことができます。

属性セレクタの応用的な活用シーン

ここからは、実務でよく遭遇する具体的な活用テクニックを紹介します。

ファイル形式に応じたアイコン表示

リンク先がどのようなファイルであるかを視覚的に伝えることは、UXの向上に直結します。

後方一致セレクタを組み合わせることで、自動的にアイコンを切り替える実装が可能です。

対象ファイル	セレクタ記述例	用途
PDFドキュメント	`a[href$=".pdf"]`	閲覧用ファイルの明示
Excelファイル	`a[href*=".xlsx"]`	表計算データへの誘導
外部ドメイン	`a[href^="http"]:not([href*="mysite.com"])`	外部リンクアイコンの表示

アクセシビリティ（ARIA属性）のスタイリング

アクセシビリティを考慮したコーディングでは、aria-checkedやaria-expandedなどの属性が多用されます。

これらの属性値をCSSで監視することで、JavaScriptでクラスを付け替える手間を省き、状態に応じたスタイルを適用できます。

CSS

/* メニューが開いている状態のボタンスタイル */
button[aria-expanded="true"] {
    background-color: #333;
    color: #fff;
}

/* 必須項目かつ未入力のエラー状態を強調 */
input[aria-invalid="true"] {
    border-color: #ff0000;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

このように、属性セレクタはセマンティックなマークアップとデザインを同期させる役割も果たします。

状態管理のためのdata属性の活用

独自のdata-*属性を利用して、コンポーネントの状態（ステート）を管理する手法は現代の標準です。

例えば、タブの切り替えやローディング状態などを属性値で制御します。

CSS

/* コンポーネントがローディング中の表示 */
.card[data-status="loading"] {
    pointer-events: none;
    opacity: 0.6;
    cursor: wait;
}

/* ユーザーの権限レベルに応じた表示の切り替え */
.admin-panel[data-role="viewer"] .edit-button {
    display: none;
}

JavaScript側からは属性値を変更するだけで済むため、CSSとロジックの分離が綺麗に行えます。