【CSS】id/classを使わず指定できる属性セレクタとは？

CSSを書いていて、別窓で開く場合はアイコンを付けたい、pdfの画像を出す場合は文字色を変えたいなどの指定を書く時、毎回idやclassを付けるのは少し手間だと思います。
そんな時に属性セレクタを使うととても便利です！
CSSのセレクタについては過去の記事で紹介していますので、今回は属性とは何かという部分からご紹介していきます。

コーディング

2021.01.29

【CSS】id/classを使わず指定できる属性セレクタとは？

CSSを書いていて、別窓で開く場合はアイコンを付けたい、pdfの画像を出す場合は文字色を変えたいなどの指定を書く時、毎回idやclassを付けるのは少し手間だと…

属性とは？

属性セレクタのご紹介の前に、属性とは何かということをご紹介します。

属性とはaタグでリンク先を指定するための「href」や、リンクの開き方を指定するための「target」といったHTMLでの指定のことを指します。
「href」や「target」の属性に続く属性の値である「index.html」や「_blank」のことを属性値と呼びます。
よく使われているclassやidも属性の一つなのです。

属性セレクタの指定方法

要素名[属性名]（属性がある場合）

要素の中に指定した属性がある場合にスタイルが適用されます。
例えば下記のように書くと、aタグの「target」属性があった場合にスタイルが適用されます。

See the Pen MWbjmbq by spiqa design (@spiqa_design) on CodePen.

要素名[属性名=”属性値”]（完全に同じ属性値がある場合）

要素の中に指定した属性の属性値があった場合に適用されます。
要素名[属性名=”属性値”]で書く場合は、属性値が完全に一致した場合のみ適用されます。
下記のように「target」属性を指定する場合、「blank」では適用されず、「_blank」と正しく書いた場合に適用されます。

See the Pen RwoGVKR by spiqa design (@spiqa_design) on CodePen.

要素名[属性名*=”属性値”]（属性値が含まれていた場合）

指定した値が属性値に含まれていた場合に適用されます。
どのような場合かというと、下記のように「test」というclassが含まれている場合を指しています。
先ほどご紹介をした記述と異なり、「*」を付けることで完全に同じでなく、属性値に含まれている場合に適用させることができます。

See the Pen qBqamrB by spiqa design (@spiqa_design) on CodePen.

要素名[属性名^=”属性値”]（指定した属性値で始まる）

指定した属性値で始まる場合に適用されます。
下記のように「test」というclassで始まる場合にのみ適用されるため、「fv_test」や「sec_test」といった「test」という属性値は含まれているものの、「test」から始まらない場合にはスタイルが適用されません。

See the Pen RwoGVRa by spiqa design (@spiqa_design) on CodePen.

要素名[属性名$=”属性値”]（指定した属性値で終わる）

先ほどご紹介したセレクタの反対で、指定した属性値で終わる場合に適用させたい場合は「$」を使用します。
先ほどと同じ例で書くと、先ほどとは逆で今度の指定方法では「fv_test」や「sec_test」といった「test」で終わる場合にスタイルが適用されます。

See the Pen oNYzWWX by spiqa design (@spiqa_design) on CodePen.

属性セレクタで指定をするとclassで指定をする手間や、付け忘れでのミスを減らすことができます。
ぜひご活用ください！