CSS 入門

CSS 属性セレクター

属性セレクター（Attribute Selectors）は、HTML属性の存在、値、または値の一部に基づいて要素をターゲットにすることを可能にします。

これにより、クラス（Class）やIDに依存することなくスタイルを適用できる強力な手法が提供され、CSSの柔軟性とメンテナンス性が向上します。特に動的に生成されるコンテンツや、特定のデータ属性（data-*）に基づいたスタイル設定において非常に有効です。

1. 属性セレクターを理解する

属性セレクターには複数の形式があり、それぞれ異なるターゲット指定の方法を提供します。各タイプの内訳は以下の通りです：

  • [attribute]：値に関わらず、指定された属性を持つ要素をターゲットにする。
  • [attribute="value"]：属性値が指定した値と完全に一致する要素をターゲットにする。
  • [attribute~="value"]：属性値に指定した値が含まれている（スペース区切りの単語の1つとして）要素をターゲットにする。
  • [attribute|="value"]：属性値が指定した値から始まり、その直後にハイフン（-）が続く要素をターゲットにする。主に言語コード（例：en-US）で使用される。
  • [attribute^="value"]：属性値が指定した値で始まる要素をターゲットにする。
  • [attribute$="value"]：属性値が指定した値で終わる要素をターゲットにする。
  • [attribute*="value"]：属性値の文字列内の任意の場所に指定した値が含まれている要素をターゲットにする。

それぞれの具体例を見ていきましょう。

1.1 属性の存在：[attribute]

このセレクターは、要素に特定の属性が存在するかどうかのみをチェックします。

<a href="https://www.example.com">hrefがあるリンク</a>
<p title="あるタイトル">titleがある段落</p>
<a>hrefがないリンク</a>
a[href] {
  color: blue;
  text-decoration: none;
}

p[title] {
  font-style: italic;
}

最初のルールは、href 属性を持つ最初の <a> タグのみにスタイルを適用します。
二番目のルールは、title 属性を持つ <p> タグにスタイルを適用します。
href を持たない二番目の <a> タグにはスタイルは適用されません。

1.2 完全一致：[attribute="value"]

属性値が指定された値と一言一句違わず一致する要素をターゲットにします。

<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="送信">
input[type="text"] {
  border: 1px solid #ccc;
  padding: 5px;
}

input[value="送信"] {
  background-color: green;
  color: white;
}

最初のルールはテキストインプットに、二番目のルールは value 属性が正確に「送信」である送信ボタンにスタイルを適用します。

1.3 スペース区切り値：[attribute~="value"]

属性がスペースで区切られた値のリスト（class 属性など）を保持している場合に便利です。

<div class="button primary call-to-action">クリック</div>
<div class="button secondary">キャンセル</div>
div[class~="button"] {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

div[class~="primary"] {
  background-color: blue;
  color: white;
}

最初のルールは両方の <div> に適用されます（どちらも "button" クラスを持っているため）。
二番目のルールは "primary" クラスを持つ最初の <div> にのみ適用されます。

1.4 ハイフン区切り値：[attribute|="value"]

主に言語コードの指定に使用されます。

<p lang="en-US">Hello, World!</p>
<p lang="en-GB">Hello, World!</p>
<p lang="en">Hello, World!</p>
<p>Bonjour le monde!</p>
p[lang|="en"] {
  font-weight: bold;
}

このルールは、lang 属性が "en" で始まるか、"en-" で始まる最初の3つの <p> 要素にスタイルを適用します。

1.5 前方一致：[attribute^="value"]

属性値が指定した文字列で始まる要素をターゲットにします。

<a href="https://www.jpkoda.com/page1">ページ 1</a>
<a href="https://www.jpkoda.com/page2">ページ 2</a>
<a href="http://www.anotherdomain.com/page3">ページ 3</a>
a[href^="https://www.jpkoda.com"] {
  color: green;
}

このルールは、href が " https://www.jpkoda.com " で始まる最初の2つの <a> 要素を緑色にします。

1.6 後方一致：[attribute$="value"]

属性値が指定した文字列で終わる要素をターゲットにします。ファイル形式に基づいたスタイル設定によく使われます。

<img src="images/logo.png">
<img src="images/banner.jpg">
<img src="images/icon.svg">
img[src$=".png"] {
  border: 2px solid red;
}

このルールは、src が ".png" で終わる最初の <img> 要素に赤いボーダーを適用します。

1.7 部分一致：[attribute*="value"]

属性値の文字列内のどこかに指定した値が含まれていれば、その要素をターゲットにします。

<input type="text" data-custom-validation="required email">
<input type="text" data-custom-validation="required phone">
<input type="text">
input[data-custom-validation*="required"] {
  border: 1px solid orange;
}

このルールは、data-custom-validation 属性の中に "required" という単語が含まれている最初の2つの <input> 要素を対象にします。

2. 実戦例とデモンストレーション

2.1 ファイル形式に基づいたリンクのスタイル設定

リンク先がどのファイル形式（拡張子）であるかに応じて、アイコンを表示したり色を変えたりすることができます。

a[href$=".pdf"] {
  color: red; /* PDFリンクを赤色にする */
  /* 必要に応じてPDFアイコンを追加 */
}

a[href$=".pptx"] {
  color: blue; /* PPTXリンクを青色にする */
}

2.2 属性に基づいたフォーム要素のスタイル設定

属性セレクターはフォームのデザインにおいて非常に強力です。

input[type="text"] { ... }
input[type="email"] { ... }

input[required] {
  background-color: #f0f0f0; /* 必須フィールドをハイライト */
}

button[type="submit"] { ... }

2.3 データ属性 (Data Attributes) の活用

data-* 属性を使用してカスタムデータを保持し、それに基づいてスタイルを切り替える手法です。

<div data-theme="dark">ダークテーマのコンテンツ</div>
<div data-theme="light">ライトテーマのコンテンツ</div>
div[data-theme="dark"] {
  background-color: #333;
  color: white;
}

div[data-theme="light"] {
  background-color: #fff;
  color: black;
}