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

0

関連記事

  • 2021.05.14

    【CSS】backgroundで行う背景画像の複数指定

    CSS

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.04.21

    【CSS】要素がはみ出てしまう時のチェック事項 / box-sizingの指定

    CSS

おすすめ記事

  • 2020.12.02

    【css】スマホでパンくずを横スクロールさせる方法

    CSS

  • コーディングで画像を好きな形に切り抜く方法

    2021.02.10

    【CSS】コーディングで画像を好きな形に切り抜く方法【IEにも対応】

    CSS

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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