CSS属性セレクター完全ガイド！7種類の構文と使い方を実例付きで解説

CSSセレクターを使うと、Webページ上の特定の要素や要素の集合に対してスタイルを適用できます。

セレクターを使っていると、「特定の属性を持つ要素だけ」を対象にスタイルを指定したくなることがあります。そんなときに役立つのがCSS属性セレクターです。属性セレクターを使えば、特定の属性を持つ要素にのみスタイルを適用できます。

この記事では、要素のスタイリングにおけるCSS属性セレクターの使い方を解説します。読み終える頃には、属性セレクターをプロのように使いこなせるようになっているでしょう。

HTML属性とは

HTMLでは、属性（アトリビュート）を使って要素の追加的な特徴や性質を定義します。たとえば、height属性は画像の高さを設定し、title属性はWeb要素のタイトルを設定します。

属性は「名前／値」のペア構造で宣言します。つまり、HTMLファイル内では属性は name="value" の形式で記述されます。HTML属性について詳しく学びたい方は、HTML属性に関するガイドも併せて参照してください。

CSS属性セレクターとは

サイトをデザインする際、要素が特定の属性値を持つかどうかに基づいてスタイルを適用したいケースがあります。そのために使うのがCSS属性セレクターです。

属性セレクターを使用する手順は、次の2ステップです。

1. 属性名を角括弧［ ］で囲む
2. その属性名を持つ要素に適用したいスタイルを指定する

それでは、CSS属性セレクターの具体的な使用例を見ていきましょう。

CSS [attribute]

属性セレクターの最も基本的な形は [attribute] です。シンプルに、属性名を角括弧で囲むだけで使えます。

たとえば、title属性を持つすべての要素のフォントサイズを16pxに設定したい場合は、次のコードを使います。

[title] {
	font-size: 16px;
}

このCSSルールは、title属性を持つ要素にのみ適用されます。title属性が指定されているすべての要素（属性の値が何であれ）のフォントサイズが、上記のルールに従って16pxに変更されます。

さらに、以下のどちらか、または両方を指定することで、属性セレクターをより精密にできます。

• ルールを適用する特定の要素タイプ
• 属性IDの値（テキストなら「title」、リンクなら「href」、あらゆる要素なら「class」など）

たとえば、title属性を持つ段落テキストのサイズをすべて16pxに設定したいとします。その場合は次のコードを使います。

p[title] {
	font-size: 16px;
}

セレクター先頭の p は、フォントスタイルを <p> タグにのみ適用するようブラウザーに指示します。また、[title] の部分は、title属性が指定された <p> タグにのみフォントスタイルを適用するよう指示します。

したがって、ブラウザーはこのコードを読み込んだ後、title属性を持つすべての段落（p）のフォントサイズを16pxに変更します。このコードはページ上の他のテキストには影響しません。

CSS [attribute="value"]

[attribute="value"] 属性セレクターを使うと、属性値がセレクターで指定した値と一致する要素にのみスタイルを適用できます。

たとえば、Career Karmaホームページへのリンクすべての背景色をオレンジに設定したいとしましょう。このスタイルは、a 要素の背景色をオレンジに設定します。次のCSSコードで実現できます。

a[href="careerkarma.com"] {
	background-color: orange;
}

このルールは、href属性の値が careerkarma.com と一致するページ上のすべての <a> 要素を選択し、それらの要素の背景色をオレンジに設定します。

CSS [attribute~="value"]

[attribute~="value"] セレクターを使うと、属性値に特定の単語を含む要素を選択できます。

たとえば、title属性の値に「blue」という単語が含まれるすべての p 要素にスタイルを適用し、これらの要素の文字色を青に変更したいとします。

このタスクは、次のルールで実現できます。

p[title~="blue"] {
	color: blue;
}

このルールは、「blue」という単語を含むtitle属性が関連付けられたすべての <p> タグを検索し、それらのタグ内のテキストの色を青に設定します。したがって、<p> タグのtitleが blue color や color blue であれば、このスタイルが適用されます。しかし、titleが blueColor である <p> タグには適用されません。「blue」という単語が属性値の中に独立した単語として存在しないためです。

これは後述の *= セレクターとの大きな違いです。*= セレクターは属性内の独立した単語だけでなく、値の一部として含まれる文字列も検索できます。

CSS [attribute|="value"]

[attribute|="value"] セレクターを使うと、指定した値（たとえば「top」）と完全に一致するか、その値の直後にハイフンが続く形（「top-style」など）で始まる属性を持つ要素を選択できます。なお、この構文では値の前に縦棒（|）とイコール（=）を続けて記述します。

たとえば、class属性が top である、または top- で始まるすべての <div> 要素に、10pxの上パディングを割り当てたいとします。その場合は次のコードを使います。

div[class|="top"] {
	padding-top: 10px;
}

このルールは、class名が top と一致する、または top- で始まるすべての <div> 要素の上部に10pxのパディングを適用します。

ここで重要なのは、指定する値は「単語そのもの」か「単語＋ハイフン」の形でなければならないという点です。言い換えれば、上記のスタイルはclass名が top や top-style の <div> 要素には適用されますが、class名が topstyle や top style の <div> 要素には適用されません。

CSS [attribute^="value"]

[attribute^="value"] セレクターは、属性値が特定の値で始まる要素を選択するために使います。先ほどの [attribute|="value"] セレクターと異なり、指定する値は完全な単語である必要はありません。

たとえば、class属性が paddingBottom で始まるすべての <div> 要素に10pxの下パディングを適用したいとします。その場合は次のコードを使います。

div[class^="paddingBottom"] {
	padding-bottom: 10px;
}

ユーザーのWebブラウザーは、ここで定義したpadding-bottomスタイルを、class名が「paddingBottom」で始まるすべての <div> タグに適用します。たとえば「paddingBottomStyle」というclassがあればこのスタイルが適用され、「paddingBottom」や「paddingBottom-element」というclassにも適用されます。しかし、「new-paddingBottom」のように「paddingBottom」で始まらないclassには適用されません。

CSS [attribute$="value"]

$= 演算子は、属性値が特定の値で終わるすべての要素を選択するために使います。たとえば、href属性の値が .app で終わるハイパーリンクテキストの文字色をすべてグレーに変更したいとします。その場合は次のコードを使います。

a[href$=".app"] {
	color: gray;
}

このセレクターは、href値が .app で終わるページ上のすべての <a> 要素に適用されます。

CSS [attribute*="value"]

*= 演算子を使うと、属性値に特定の値を含むすべての要素を選択できます。~= 演算子とは異なり、この属性セレクターはclass内の独立した単語だけでなく、値の一部として含まれる任意の文字列を検索できます。

たとえば、class属性に allPadding を含むすべての <div> タグの周囲に50pxのパディングを適用したいとします。その場合は次のルールを使います。

div[class*="allPadding"] {
	padding: 50px;
}

このルールは、class属性に「allPadding」という文字列を含むすべてのHTML要素の周囲に50pxのパディングを設定します。したがって、「new allPadding」「surround allPadding red」「allPaddingblue」「allPadding-true」といったclass名の要素は、すべてこのスタイルの対象になります。

応用：大文字・小文字を区別しないマッチング（iフラグ）

CSS Selectors Level 4では、属性セレクターの末尾に i を付けることで、大文字・小文字を区別せずに値を照合できます。たとえば a[href$=".APP" i] と書けば、拡張子が .app でも .APP でも同じスタイルが適用されます。URLやファイル名など、表記ゆれが起こりやすい値を扱う際に便利な機能です。

まとめ

CSS属性セレクターを使うと、開発者は属性値に基づいて要素を選択し、それらの要素に特定のスタイルを適用できます。

この記事では、具体例を挙げながら、属性セレクターの基礎と、[attribute]、[attribute="value"]、[attribute~="value"]、[attribute|="value"]、[attribute^="value"]、[attribute$="value"]、[attribute*="value"] の7種類すべての使い方を解説しました。それぞれの違いを理解すれば、より柔軟で保守しやすいCSSが書けるようになります。さっそく自分のプロジェクトでも、CSS属性セレクターを活用してみてください。