【CSS】「属性セレクター」について解説！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの「属性セレクター」について解説します。

「属性セレクター」って何？？

このような方が対象です。

また、下の動画でも「属性セレクター」について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

そもそもCSSの「セレクター」とは何か？

CSSの「セレクター」とは「どの要素にスタイルを当てるか？」を指定する箇所のことを指します。

ふむふむ。

「属性セレクター」とは何か？（attribute selector）

[title] {
    background-color: skyblue;
}

「属性セレクター」を使うと、指定した属性を持つ要素を選択することができます。

上の例では、全ての「title属性を持つ要素」が選択できます。

基本的な書き方は、[]角括弧の中に属性名を書いてあげればOKです！

ふむふむ。

そもそも「属性」とは何か？

「属性」を使うと、HTMLの要素に追加で情報を持たせることができます。

何の情報なのか？を表す箇所を「属性名」と呼び、

そこに入る情報のことを「属性値」と呼びます。

要素によってつけられる属性はまちまちなのですが、その「属性名」をセレクターとしてスタイルを当てることができるのが「属性セレクター」ということですね！

「属性セレクター」の使い方！

「属性セレクター」といっても複数の書き方があります。それらについて細かく解説していきますね！

基本的な書き方は、[]角括弧の中に属性名を書いてあげればOKです！

「属性セレクター」の使い方は下記のように複数あります。

では、それらについて解説していきます。

[title] 属性名を書くタイプ

<div title="座右の銘">いつも心に太陽を </div>

[title] {
    background-color: skyblue;
}

最も基本的な書き方です。

[]角括弧の中に属性名を書いてあげると、その属性を持つ要素にスタイルを当てることができます。

[href=”https://www.google.com/”] 属性値も指定するタイプ

<a href="https://www.google.com/">Googleへ</a>

[href="https://www.google.com/"] {
    background-color: skyblue;
}

属性名と属性値をセットで指定することもできます。

[href^=”https:://”] 前方一致

<a href="https://www.google.com/">Googleへ</a>
<a href="https://www.yahoo.co.jp/"></a>

[href^="https://"] {
    background-color: skyblue;
}

「^」を使うことで「前方一致」の指定ができます。

例えば「href属性」の値が「https://」で始まる要素にスタイルを当てる、のような指定が可能になります。

[href$=com] 後方一致

<a href="https://www.google.com"></a>
<a href="https://www.apple.com/"></a>

[href$="com"] {
    background-color: skyblue;
}

「$」を使うことで「後方一致」の指定ができます。

例えば「href属性」の値が「com」で終わる要素にスタイルを当てる、のような指定が可能になります。

[href*=””] 部分一致

<div class="top_box_red"></div>
<div class="sub_box_blue"></div>

[class*="box"] {
    width: 100px;
    height: 100px;
}

「*」を使うことで「部分一致」の指定ができます。

例えば「class属性」の値に「box」を含む要素にスタイルを当てる、のような指定が可能になります。

「"top_box_red"」や「"sub_box_blue"」が当てはまりますね。

[class~=”logo”] 複数の値の中に含まれる

<div class="logo box foo"></div>

[class~="logo"] {
    background-color: skyblue;
}

「~」を使うことで「半角空白で区切られている複数の値の中から一致するもの１つ」という指定ができます。

例えば「class属性」の値に「logo」を含む要素にスタイルを当てる、のような指定が可能になります。

[href*=”active” i] 大文字小文字の区別なし

<a href*="camelCase">リンク</a>

[href*="camelcase"] {
    background-color: skyblue;
}

閉じ角括弧の前に「i」をつけることで、大文字小文字の「区別なし」で一致しているかどうか確認してもらうことができます。

[href*=”cAsE” s] 大文字小文字の区別あり

<a href*="camelCase">リンク</a>

[href*="camelCase"] {
    background-color: skyblue;
}

閉じ角括弧の前に「s」をつけることで、大文字小文字の「区別あり」で一致しているかどうか確認してもらうことができます。

※対応しているWebブラウザが少ないので注意が必要です。

[lang|=”en”] 「-」ハイフン付き

[lang|="en"] {
    color: brown;
}

「|」バーティカルラインを使うことで、指定した文字列の直後にハイフンがついたものだけにスタイルを当てられます。

例えば、[lang|=”en”]だと、「en-US」「en-GB」「en-CA」のように「en」から始まりそれに続けて「-」ハイフンがくるものが一致します。

https://caniuse.com/?search=attribute%20selector%20Case-sensitive

「Firefox」と「Firefox for Android」でしか対応していないようです、、。

なので事実上は使えないことになりますね。

ですが「s」を使わなくても、そもそも「i」を使わなければ、大文字小文字区別が区別できる言語の場合は区別されるので、「s」が使えなくても特に問題ありません！

「属性セレクター」の他の使い方！

「属性セレクター」の基本的な使い方は上述した通りです。

ですが、まだ他の使い方もあるので、そちらの方についても扱っておきます！具体的には下記があります。

• h2[title]要素の指定もする
• a[href^=”https”][href$=”.org”]　複数つけられる（始まりと終わりの指定など）

では、それらについても丁寧に解説していきます！

h2[title]要素の指定もする

h2[title] {
    background-color: skyblue;
}

要素セレクターの直後に属性セレクターの[]角括弧をつけることで、要素の指定もすることができます。

上の指定だと、「title属性を持ったh2要素」にスタイルが当たります。

※要素名と角括弧の間はスペースを空けない、ということに注意です。

a[href^=”https”][href$=”.org”]　複数つけられる（始まりと終わりの指定など）

a[href^="https"][href$=".org"] {
    background-color: skyblue;
}

[]角括弧を繋げて書くことで、複数の属性がついた要素にスタイルを当てることができます。

上の例は、「前方一致」と「後方一致」を組み合わせた指定になっていて、「https」から始まり「org」で終わる「href属性」を持っている「a要素」にスタイルが当たります！

※各括弧を２つ以上書いてもOKです！

「属性セレクター」を使うことのメリット！

「属性セレクター」を使うことのメリットについても、まとめておきます！

これらがあるのかな、と思います。

classやidを設定しなくて済む

img[src="pengin.png"] {
    object-fit: cover;
}

classやidを無暗につけると、他の要素とバッティングしてしまう確率も上がりますし、上手い命名ができないこともありますし、どんなclass名を付けようか迷うこともあります。

なのでimg要素なんかにスタイルを当てるときは、class属性をつけなくても、属性セレクターを使えば一発でスタイルが当てられるので、その方が楽ですかね。

複数の要素に共通のスタイルを当てたい時はclass属性を使うと便利なのですが、この画像だけに個別でスタイルを当てたい、のような時は属性セレクターで書いちゃった方がいいのかなと思います。

コードが読みやすくなる

<div class="container">
    <div class="box" data-category="blue"></div>
    <div class="box" data-category="red"></div>
    <div class="box" data-category="green"></div>
</div>

.box {
    width: 100px;
    height: 100px;
}
.box[data-category="blue"] {
    background-color: blue;
}
.box[data-category="red"] {
    background-color: red;
}
.box[data-category="green"] {
    background-color: green;
}

基本的なスタイルは「class」を使って指定して、個別のスタイルは「属性セレクター」を使ってあげると、コードが読みやすくなるのかなと思います。

全て「class」を使ってもOKなのですが、個別のスタイルは「属性セレクター」の箇所で指定しているんだな、と瞬時に把握することができると思うので、この方が個人的に読みやすいです。

上の例では「data-」から始まる任意の属性名を付けることができる「カスタムデータ属性」を上手く活用しています！

参考リンク。

仕様書。
https://drafts.csswg.org/selectors/#attribute-selectors

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors

あわせて読みたい記事。

まとめ

CSSの「セレクター」とは「どの要素にスタイルを当てるか？」を指定する箇所のことを指す。

属性セレクター」を使うと、指定した属性を持つ要素を選択することができる。

「属性セレクター」の使い方は下記のように複数ある。

他には下記もある。

• h2「title」要素の指定もする
• a[href^=”https”][href$=”.org”]　始まりと終わりの指定（複数つけれる）

この記事が気に入った方は僕のTwitter（@chibasyuta）のフォローもお願いします！

また、下の動画でも「属性セレクター」について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！