[CSS]属性セレクター

最終更新日:2022.03.14 [月] 公開日:2022.03.12 [土] カテゴリー:未分類

Pocket
Facebook にシェア
LINEで送る

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

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



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。~=はその属性の値そのものです。


スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA