CSS

2021.01.29

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

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

属性とは?

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

属性とは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で指定をする手間や、付け忘れでのミスを減らすことができます。
ぜひご活用ください!

関連記事

  • 2021.10.01

    【コピペで簡単!】CSSのみで作るシンプルなセレクトボックス(矢印の消し方や枠のサイズ変更方法も解説)

    CSS

  • 2021.08.03

    【コピペOK】パンくずリストの設置方法(便利なプラグインも紹介)

    CSS

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

おすすめ記事

  • 2021.05.24

    初心者でもすぐに使えるjQueryが満載なおすすめ本【書評】

    JavaScript

  • 2021.08.24

    現場で使える!WordPressおすすめ書籍(書評)

    WordPress

  • 2021.09.10

    JavaScriptの基礎をスピーディーに学べる!初心者におすすめの教本を紹介

    JavaScript

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!