属性セレクター
HTML の学習で学んだように、要素はマークアップについてさらに詳細な情報を提供する属性を持つことがあります。 CSS では、属性セレクターを使用して、ある種類の属性のある要素を対象に指定できます。このレッスンでは、これらのとても便利なセレクターの使い方を紹介します。
| 前提条件: | 基本的なソフトウェアがインストールされていること, basic knowledge of ファイルの扱い, HTML basics (study HTML 入門)、および CSS がどのように動作するかという考え（CSS の第一歩）に関する基本的な知識を得ている。 |
|---|---|
| 目的: | 属性セレクターとは何かと、その使い方を学ぶ。 |
存在や値のセレクター
これらのセレクターにより、要素を属性が存在するか (href など)、または属性の値に対して様々な方法で一致させて選択できるようになります。
| セレクター | 例 | 説明 |
|---|---|---|
[attr] |
a[title] |
attr という属性名を持つ要素と一致します（値を角括弧の中に入れます）。 |
[attr=value] |
a[href="https://example.com"] |
attr という属性名で値が value と完全一致する要素と一致します。文字列は引用符の中に入れます。 |
[attr~=value] |
p[class~="special"] |
|
[attr|=value] |
div[lang|="zh"] |
値が正確に value であるか、または value の直後にハイフンが続く値で始まるattr 属性を持つ要素に一致します。 |
以下の例では、これらのセレクターが使用されていることがわかります。
li[class]を使用することで、 class 属性を持つ任意のセレクターに一致させることができます。これは、最初のものを除いたすべてのリストアイテムに一致します。li[class="a"]は、a のクラスを持つセレクターには一致しますが、別のスペースで区切られたクラスを値の一部として持つ a のクラスを持つセレクターには一致しません。2 番目のリストアイテムを選択します。li[class~="a"]は、aのクラスを持つセレクターに一致しますが、空白で区切られたリストの一部にaのクラスを含む値にも一致します。2 番目と 3 番目のリストアイテムを選択します。
部分文字列照合セレクター
これらのセレクターは、属性の値の中の部分文字列をより高度に照合させることができます。例えば、 box-warning と box-error のクラスがあり、文字列 "box-" で始まるものを全て一致させたい場合、 [class^="box-"] を使用して両方を選択することができます。
| セレクター | 例 | 説明 |
|---|---|---|
[attr^=value] |
li[class^="box-"] |
値が value で始まる attr 属性（名前は角括弧内の値）を持つ要素に一致します。 |
[attr$=value] |
li[class$="-box"] |
値が value で終わる attr 属性を持つ要素に一致します。 |
[attr*=value] |
li[class*="box"] |
文字列内の任意の場所に value を含む attr 属性を持つ要素に一致します。 |
（ところで、長い間 ^ と $ は正規表現において、それぞれ 先頭 と 末尾 を意味する アンカー として使用されてきたことに注意すると有用かもしれません。）
次の例は、これらのセレクターの使用法を示しています。
li[class^="a"]はaで始まる属性値に一致するので、最初の 2 つのリストアイテムに一致します。li[class$="a"]はaで終わる属性値に一致するので、最初と 3 番目のリストアイテムに一致します。li[class*="a"]は、aが文字列のどこかに現れる属性値に一致します。
大文字小文字の区別
属性値を大文字小文字を区別せずに照合したい場合は、閉じ括弧の前に値 i を使うことができます。このフラグは、ブラウザーに ASCII 文字を大文字小文字を区別せずに照合するように指示します。このフラグがない場合、値は文書言語の大文字小文字の区別に従って照合されます - HTML の場合は大文字小文字を区別します。
下の例では、最初のセレクターは a で始まる値に一致します。他の 2 つのリストアイテムは大文字の A で始まるので、最初のリストアイテムにのみ一致します。 2 つ目のセレクターは大文字と小文字を区別しないフラグを使用しているので、すべてのリストアイテムに一致します。
メモ: 新しい値 s もあります。これは、通常大文字と小文字が区別されないコンテキストで大文字と小文字を区別する照合を強制しますが、これはブラウザーではあまり対応されておらず、HTML の文脈ではあまり役に立ちません。
次のステップ
これで属性セレクターが完了しました。次の記事に進んで、pseudo-class and pseudo-element selectorsについて読むことができます。