今日は属性セレクタについて学んだ。

参考


#15 属性セレクタを使ってみよう | CSS3入門 - プログラミングならドットインストール

要素の属性で一致するものだけに適用できるかなり便利なものだった。
今回はリンクのURLの中身で一致するものの文字色を変えていた。

カッコ内と一致する場合にだけ適用できる。
a[href^=""]の場合はカッコ内と先頭が一致すれば適用される。
a[href$=""]の場合はカッコ内と後方が一致すれば適用される。
a[href*=""]の場合はカッコ内のものが含まれていれば適用される。

実際に書くとこんな感じ。

a[href="#"] {
color: yellow;
}

便利だとは思ったけど、実際に使う場面ってどんなところなのか。