【css】class名、id名を前方一致、後方一致、部分一致で指定する方法

上記で一緒に説明しようと思ったけれど、使うタイミングが別の事が多いので、記事を別にしました。

前方一致

^="　で指定

[id^="forward"] {
  font-size: 24px;
}
[class^="forward"] {
  font-size: 24px;
}

後方一致

$="　で指定

[id$="backward"] {
  font-size: 24px;
}
[class$="backward"] {
  font-size: 24px;
}

部分一致

*=　で指定

[id*="part"] {
  font-size: 24px;
}
[class*="part"] {
  font-size: 24px;
}

and条件

単純に続けるだけ

[id*="a"][id*="b"]{
  font-size: 24px;
}
[class*="a"][class*="b"]{
  font-size: 24px;
}

or条件

,　でつなげる

[class*="a"],[id*="b"]{
  font-size: 24px;
}

サンプル