属性セレクター

This translation is incomplete. この記事の翻訳にご協力ください

HTML の学習で学んだように、要素はマークアップについてさらに詳細な情報を提供する属性を持つことがあります。 CSS では、属性セレクターを使用して、ある種類の属性のある要素を対象に指定できます。このレッスンでは、これらのとても便利なセレクターの使い方を紹介します。

前提条件: 基本的なコンピューターリテラシー、基本的なソフトウェアがインストールされていること、ファイルの扱い、 HTML の基本 (HTML 入門) および CSS に関するアイデア (CSS の第一歩) に関する基本的な知識を得ている。
目的: 属性セレクターとは何かと、その使い方を学ぶ。

存在や値のセレクター

これらのセレクターにより、要素を属性が存在するか (href など)、または属性の値に対して様々な方法で一致させて選択できるようになります。

セレクター 説明
[attr] a[title] attr という属性名を持つ要素と一致します。 — 値を角括弧の中に入れます。
[attr=value] a[href="https://example.com"] attr という属性名で値が value と完全一致する要素と一致します。— 文字列は引用符の中に入れます。
[attr~=value] p[class~="special"]

Matches elements with an attribute name of attr whose value is exactly value, or elements with an attr attribute containing one or more values, at least one of which matches value.

Note that in a list of multiple values the separate values are whitespace-separated.

[attr|=value] div[lang|="zh"] Matches elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen.

In the example below you can see these selectors being used.

  • By using li[class] we can match any selector with a class attribute. This matches all but the first list item.
  • li[class="a"] matches a selector with a class of a, but not a selector with a class of a with another space-separated class as part of the value. It selects the second list item.
  • li[class~="a"] will match a class of a but also a value that contains the class of a as part of a whitespace-separated list. It selects the second and third list items.

部分文字列一致セレクター

These selectors allow for more advanced matching of substrings inside the value of your attribute. For example, if you had classes of box-warning and box-error and wanted to match everything that started with the string "box-", you could use [class^="box-"] to select them both.

セレクター 説明
[attr^=value] li[class^="box-"] Matches elements with an attribute name of attr whose value has the substring value at the start of it.
[attr$=value] li[class$="-box"] Matches elements with an attribute name of attr whose value has the substring value at the end of it.
[attr*= ] li[class*="box"] Matches elements with an attribute name of attr whose value contains at least one occurrence of the substring value anywhere within the string.

The next example shows usage of these selectors:

  • li[class^="a"] matches any attribute value which starts with a, so matches the first two list items.
  • li[class$="a"] matches any attribute value that ends with a, so matches the first and third list item.
  • li[class*="a"] matches any attribute value where a appears anywhere in the string, so it matches all of our list items.

大文字・小文字の区別

If you want to match attribute values case-insensitively you can use the value i before the closing bracket. This flag tells the browser to match ASCII characters case-insensitively. Without the flag the values will be matched according to the case-sensitivity of the document language — in HTML's case it will be case sensitive.

In the example below, the first selector will match a value that begins with a — it only matches the first list item because the other two list items start with an uppercase A. The second selector uses the case-insensitive flag and so matches all of the list items.

: There is also a newer value s, which will force case-sensitive matching in contexts where matching is normally case-insensitive, however this is less well supported in browsers and isn't very useful in an HTML context.

やってみよう

In the live example below, add CSS using attribute selectors to do the following:

  • Target the <a> element with a title attribute and make the border pink (border-color: pink).
  • Target the <a> element with an href attribute that contains the word contact somewhere in its value and make the border orange (border-color: orange).
  • Target the <a> element with an href value starting with https and give it a green border (border-color: green).

: You can take a look at the solution here — but try to figure it out yourself first!

次のステップ

Now we are done with attribute selectors, you can continue on to the next article and read about pseudo-class and pseudo-element selectors.

このモジュール内の文書

  1. カスケードと継承
  2. CSS セレクター
  3. ボックスモデル
  4. 背景と境界
  5. テキスト方向の操作
  6. 要素のはみ出し (オーバーフロー)
  7. CSS の値と単位
  8. CSS によるサイズ設定
  9. 画像・メディア・フォーム要素
  10. 表のスタイリング
  11. CSS のデバッグ
  12. CSS の整理