最終更新日：2022.05.30 [月]　公開日：2022.03.12 [土]　カテゴリー：html・CSS・jQuery・JS備忘

属性セレクター、すごく便利なのでとってもよく使うのですが、その割になんやったっけ？って忘れるので、忘れっぽい自分のためにも整理しようと思います。

うまくまとめる自信がないので、いろんな例を上げる形で。

p[title]{スタイル}

<p titile=”hoge”>なんたらかんたら</p>

という感じでtitle使ってる時にスタイルが適用されます。

a[target=”_blank”]{スタイル}

aタグのtarget=”_blank”が設定されてるものに適用。

a[href=”#wrap”]{スタイル}

一つ前の事例と同じですが、意外とこういう形よく使うんだわ・・・

a[href^=”mailto:”]{スタイル}→先頭が一致

「^=」は先頭がこれの場合・・・という設定。mailto:とかtel:で使うことが多い。

a[href$=”.com”]{スタイル}→末尾が一致

「$=」は文末がこれの場合・・・という設定。

a[href*=”hoge”]{スタイル}→hogeという文字列の属性の値含む

これが一番使う！！このサンプルで言うと、hrefの中身にhogeという文言があればってことです。

ある意味大体これでいけるんじゃない？！ってくらい、すごく使う。

a[class~=”hoge”]{スタイル}→hogeという属性の値含む

*= と似ています。一つ前のと似ていますが、少し違います。

*=はその文字列含んだらOK。~=はその属性の値そのものです。