プログラミング

CSS 属性セレクタ完全ガイド

最終更新： 28/02/2025
1 分の読み

CSSの属性セレクタ（Attribute Selector）は、HTML要素の属性に基づいてスタイルを適用するための強力なツールです。このセレクタを使用すると、特定の属性を持つ要素やその属性値に基づいてデザインを変更できます。CSSの属性セレクタは、クラスやIDセレクタと異なり、要素が持っている属性の名前や値に対して直接操作を行うことができます。

属性セレクタの基本構文

属性セレクタは、角括弧[]で囲まれた属性名やその値を指定することで使います。以下にいくつかの基本的な例を示します。

関連記事
css
/* 属性が指定されているすべての要素に適用 */
[属性名] {
  /* スタイル定義 */
}

/* 属性が特定の値を持つ要素に適用 */
[属性名="値"] {
  /* スタイル定義 */
}

/* 属性が特定の値を含む要素に適用 */
[属性名~="値"] {
  /* スタイル定義 */
}

/* 属性が部分一致する値を持つ要素に適用 */
[属性名|="値"] {
  /* スタイル定義 */
}

/* 属性が特定の値で始まる要素に適用 */
[属性名^="値"] {
  /* スタイル定義 */
}

/* 属性が特定の値で終わる要素に適用 */
[属性名$="値"] {
  /* スタイル定義 */
}

/* 属性が特定の値を含む要素に適用 */
[属性名*="値"] {
  /* スタイル定義 */
}

各種属性セレクタの詳細解説

1. [属性名]

このセレクタは、指定した属性を持つすべての要素にスタイルを適用します。属性の値には関係なく、属性そのものが存在するかどうかで判定されます。

css
/* href属性を持つすべてのリンク要素に適用 */
a[href] {
  color: blue;
}

2. [属性名="値"]

このセレクタは、指定した属性が特定の値と一致する要素にスタイルを適用します。

css
/* href属性が「https://example.com」であるリンクに適用 */
a[href="https://example.com"] {
  color: green;
}

3. [属性名~="値"]

このセレクタは、指定した属性の値がスペースで区切られた単語のリストであり、そのリストの中に指定した値が含まれている場合にスタイルを適用します。

css
/* class属性に「highlight」が含まれるすべての要素に適用 */
div[class~="highlight"] {
  background-color: yellow;
}

4. [属性名|="値"]

このセレクタは、指定した属性が指定された値で始まり、その後にハイフン（-）で区切られた他の文字列を持つ場合にマッチします。主に言語コードや国コードに使われます。

css
/* lang属性が「en-」で始まる要素に適用 */
p[lang|="en"] {
  font-family: Arial, sans-serif;
}

5. [属性名^="値"]

このセレクタは、指定した属性が特定の値で始まる場合にスタイルを適用します。特定のプレフィックスを持つURLやクラス名に使われます。

css
/* src属性が「https://」で始まる画像要素に適用 */
img[src^="https://"] {
  border: 2px solid green;
}

6. [属性名$="値"]

このセレクタは、指定した属性が特定の値で終わる場合にスタイルを適用します。URLの拡張子や特定の文字列のサフィックスに役立ちます。

css
/* href属性が「.pdf」で終わるリンクに適用 */
a[href$=".pdf"] {
  color: red;
}

7. [属性名*="値"]

このセレクタは、指定した属性が指定した値を含んでいる場合にスタイルを適用します。部分一致検索に使用されます。

css
/* href属性に「example」を含むすべてのリンクに適用 */
a[href*="example"] {
  color: purple;
}

属性セレクタの活用例

1. 入力フォームのスタイル

フォームの入力フィールドやボタンに属性セレクタを使用してスタイルを変更することができます。

css
/* name属性が「username」の入力フィールドに適用 */
input[name="username"] {
  border: 2px solid blue;
}

/* type属性が「submit」のボタンに適用 */
button[type="submit"] {
  background-color: green;
  color: white;
}

2. リストの特定のアイテムにスタイルを適用

data-*属性を使って、特定のデータを持つリストアイテムにスタイルを適用できます。

css
/* data-type属性が「special」のリストアイテムに適用 */
li[data-type="special"] {
  font-weight: bold;
}

属性セレクタと他のセレクタとの組み合わせ

CSSの属性セレクタは、他のセレクタと組み合わせて使用することもできます。これにより、より具体的な条件でスタイルを適用できます。

css
/* class属性が「highlight」を持ち、data-id属性が「123」の要素に適用 */
div[class="highlight"][data-id="123"] {
  background-color: yellow;
}

属性セレクタの注意点

  1. 大文字小文字の違い
    HTMLの属性名は大文字小文字を区別しませんが、CSSでは属性値が大文字小文字を区別する場合があります。特に、type属性など、特定の値が大文字小文字を区別する場合に注意が必要です。

  2. パフォーマンス
    属性セレクタを多く使う場合、ページのパフォーマンスに影響を与えることがあります。特に、*=や^=などの部分一致セレクタは多くの要素にマッチする可能性があり、パフォーマンスの低下を招くことがあります。

結論

CSSの属性セレクタは、HTML要素の属性に基づいてスタイルを適用するための強力なツールです。これを利用することで、より細かい制御を実現し、ダイナミックで柔軟なデザインを作成することができます。様々な属性セレクタを組み合わせて使うことで、複雑な条件に基づくスタイリングが可能となります。

最終更新： 28/02/2025
1 分の読み
Back to top button