cssで半角スペースを含むセレクタ名を使う方法

2020-01-01WEBサイト運営css,WordPress,カスタマイズ

WordPressなど既存のプログラムをカスタマイズする際、クラス名などに半角スペースが使われているケースがあります。
しかし、cssのセレクタに半角を使った場合正常に動作しません。
この問題の解決方法をお教えします。

スポンサーリンク

解決例

例えば、WordPressで以下のような状態があり、子テーマのcssで装飾を上書き変更したい場合

【HTML】
<ul>
 <li class="dateList__item icon- calendar">
 あいうえお
 </li>
</ul>


【子テーマCSS】
li .dateList__item icon- calendar {
変更内容;
}
と記述したなら、mとiの間に半角スペースがあるので、意図した動作になりません。

そこで、以下のようにしてやります。
【子テーマCSS】
li[class*="icon-calendar"] {
  変更内容;
}
これは、classの横にアスタリスクをつけることで、 icon-calendar を含むクラスを指定しています。
今回の例では、li要素下のicon-calendarという文字列をもつクラスを指定した形です。
こうすれば変更内容が適切に反映されます。


スポンサーリンク