接頭辞つきのクラスをCSSで指定する方法

昨晩生徒さんのソースを添削していたところ、見慣れない記述があったので「お、」と目に留まりました。

[class^="news-"]{
  background: #333;
}

というような指定方法。

これはクラス名の先頭に「news-」が含まれるものすべてに適用されるっぽい。
正確には

[class^="news-"], 
[class*=" news-"] { 
  background: #333;
}

と書いておく必要があるもよう。
そうしないと　<div class=” news news-1″>みたいに、二個めのクラスだった時に対応できないそう。

こういう、「接頭辞」のことをPrefixというらしい
（そういえばよくわからずにベンダープレフィックスとか設定してたなぁと。そういうことね）

逆に、<div class=”news-important”>の「-important」のみ（接頭尾部分。suffixというらしい）をセレクタ指定する場合は

[class$="-important"], 
[class*="-important "] { 
  background: #333;
 }

と書くもよう。

知らなかったなぁ～
クラスって複数指定できるから、いわゆるOOCSSでの書き方のほうが馴染みがあるというかとっかかりやすいというか。

これってちゃんとscssで書いたときに正しくコンパイルできるの！？って思ったらコンパイルもちゃんとできた。

調べても昔の記事しか出てこなかったけど最近はあまり使われていないのかな。あんまり見かけないし。

奥が深いぜ！！