https://codepen.io/yuriacats/pen/QWOpgqN
↑ サンプルコードはこちら
CSSで要素を前方検索・後方検索
後方検索
タグ名[class$="ターゲット文字"]
前方検索
タグ名[class^="ターゲット文字"]
部分検索
タグ名[class*="ターゲット文字"]
使用例
input[type="checkbox"]:checkd~div[class^="hoge"]
意味：
チェックボックスがチェックされた時に兄弟要素のうち、hogeから始まる要素（=hogetarou,hoge-01-red など）にCSSが適用される
上記の機能を活用することで、以下のようなCSSの適用の仕方をしたい時に以下のようにCSSのクラスを命名することで、少ない行で簡単にスタイルの違いを作ることができます。
| 要素A＼要素B | あり | なし |
|---|---|---|
| あり | youa-youb | youa-off |
| なし | off-youb | off-off |
div[class^="youa"]{
//youaの時のスタイル
}
div[class$="youb"]{
//youbの時のスタイル
}