【CSS】属性セレクタ―を使って対象を絞り込む方法

属性セレクターとは

・CSSで対象を指定する時に、良く使うのはタグ指定・ID指定・クラス指定といった方法である。


a{
  color:red;
}

#target_id{
  color:blue;
}

.target_class{
  color:green;
}

・上記の方法だけでは、目的とする要素を指定できないケースがある。そのような場合に使えるのが属性セレクターである。

・属性セレクターを使うと、要素が持つ属性でフィルタをかけることが可能となる「属性とは、href、type、disabled、data-～といったものを指す」

・例えば、以下のような要素を指定することができる。
　・aタグの中で、href属性にgoogle.comを含むもの。
　・aタグの中で、href属性にgoogle.comを含まないもの。


a[href*="google.com"]{
  color: red;
}

a:not([href*="google.com"]){
  color: green;
}

・含むという条件だけでなく、始まるや終わるという指定も可能。
　・一致する：a[href="google.com"]
　・始まる：a[href^="google.com"]
　・終わる：a[href$="google.com"]
　・含む：a[href*="google.com"]