for$="Icon"との出会い

先日、自分ではない人が書いたこんなCSSがあったのです。（実際のCSSとは一部異なります。）

.sample[for$="Icon"] {
    color: #ff5555;
}

この、[for$="Icon"]の

「何者だこいつは...」ってなったんです。調べても案外出てこないしで、謎だったのですが、同僚に調べてもらったら見つかりました。

for$="Icon"の正体

こいつは、forの末尾がIconとなっている要素に適用されます。

ちなみに逆の指定（つまり、特定の文字列から始まる指定）も可能で、その場合は[for^="Icon"のように書きます。

まぁ、forなんかは複数指定することもないでしょうから特別気をつけることもないのですが、これがclass指定だとちょっと注意です。

例えば、[class$="Icon"]と指定した場合、Iconで終わるclassに適用されます。

結論から言うと、class="sample loveIcon"には適用されて、class="loveIcon sample"には適用されません。

「classの末尾はみんな同じにして末尾セレクタでパパッとかいたろ！！」って時は注意しましょう。