id/classセレクタを属性セレクタ形式で指定する

メモ書き。

id/classセレクタの#id-name / .class-nameは、[id="id-name"] / [class="class-name"] と属性セレクタとして記述・指定することができます。

このように書くと、id/classセレクタではなく属性セレクタとして扱われます。
したがって、classに関しては詳細度は変わりませんが、id指定を属性セレクタで記述することで詳細度を下げることができます。

↓.class-name/[class=”class-name”]
Kobito.8wp46i.png

↓#id-name/[id=”id-name”]
Kobito.lyu1go.png

Specificity Calculatorで詳細度を見てみました。

昨今のBEMやらOOCSSの流れを鑑みると使うケースはなかなかないかもしれませんが、アイデアの一つとして知っておきたいですね。

参考文献

  • BLOG
  • >
  • web
  • >
  • id/classセレクタを属性セレクタ形式で指定する