こんにちは、制作部くしだです。
先日調べものをしている際sassの知らない記述を目にしました。
[class^=””]
こちらです。
なんだこれは！？と調べてみました。
どうやらsassではなくcssの記述のようでした。
「前方一致するクラスに適用される」
例えば[class^=”box”]とした場合、
box,box-ttl,box-wrap,boxingなど
boxから始まるクラスに適用されます。
注意が必要なのが
<div class=”item box”></div>
この場合は適用されない！ということです。
複数のクラスがある場合は先頭のクラスが参照されます。
先ほどのように最後にあるクラスを参照させたい場合
「後方一致するクラスに適用される」
[class$=””]
こちらを使用してください。
<div class=”item box01″></div>
この場合、[class$=”01″]は適用されますが、[class$=”box”]では適用されません。
上2つはクラスの位置を気にしないといけませので、どの位置にあっても適用させたい場合
「含むクラス全てに適用される」
[class*=””]
<div class=”item img_box-01″></div>
この場合でも[class*=”bo”]で適用してくれます。
ただ注意したいのが、<div class=”boy”></div>や<div class=”rainbow”></div>など、
意図せず関係ないクラスに適用されてしまう可能性があることです。
似たようなので、[class~=””]がありますが、
こちらは部分的ではなく単語単位となりますので、
<div class=”item img_box-01″></div>
この場合[class~=”box”]では適用されず[class~=”img_box-01″]としなくてはいけません。
チームでコーディングする場面では使うには注意が必要ですが、個人で1からコーディングするときは便利だと思います。
ちなみにclass以外の属性でも使えます。