属性セレクター

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"] 値が正確に value である attr の属性名を持つ要素、または 1 つ以上の値を含む attr 属性を持つ要素に一致します。複数の値のリストでは、個別の値が空白で区切られていることに注意してください。
[attr|=value] div[lang|="zh"] 値が正確に value であるか、または value の直後にハイフンが続く値で始まる attr 属性を持つ要素にマッチします。

以下の例では、これらのセレクタが使用されていることがわかります。

  • li[class] を使用することで、クラス属性を持つ任意のセレクタにマッチさせることができます。これは、最初のものを除いたすべてのリスト項目にマッチします。
  • li[class="a"] は、a のクラスを持つセレクタにはマッチしますが、別のスペースで区切られたクラスを値の一部として持つ a のクラスを持つセレクタにはマッチしません。2 番目のリスト項目を選択します。
  • li[class~="a"]は、 a のクラスを持つセレクタにマッチしますが、空白で区切られたリストの一部に a のクラスを含む値にもマッチします。2 番目と 3 番目のリスト項目を選択します。

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

これらのセレクタは、属性の値の中の部分文字列をより高度にマッチさせることができます。例えば、 box-warningbox-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 で始まるため、最初のリスト項目にのみマッチします。

メモ: 新しい値 s もあります。これは、通常大文字と小文字が区別されないコンテキストで大文字と小文字を区別するマッチングを強制しますが、これはブラウザーではあまりサポートされておらず、HTML コンテキストではあまり役に立ちません。

やってみよう

下のライブの例では、属性セレクタを使った CSS を追加して以下のようにします。

  • title 属性を持つ <a> 要素をターゲットにして、ボーダーをピンク(border-color: pink)にする。
  • <a> 要素の href 属性の値のどこかに contact という単語が含まれているものをターゲットにして、ボーダーをオレンジ色にする (border-color: orange)。
  • href 属性の値が https で始まる <a> 要素を対象とし、ボーダーを緑色(border-color: green)にする。

メモ: ここで解答を見ることができますが、まずは自分で考えてみてください。

次のステップ

これで属性セレクターが完了しました。次の記事に進んで、pseudo-class and pseudo-element selectorsについて読むことができます。