和洋風KAI

【CSS】スタイルシートを正規表現的に指定するには?

CSSも正規表現的に一気に指定できないものか?

と思ったら出来てしまうんですね。参考になったのはこの記事です。

css selectors – wildcard * in CSS for classes – Stack Overflow

例えば、以下のような、liのnaviを含んでいるすべてのclassに一気にスタイルを当てたい場合。

<li class="navi_head">HOME</li>
<li class="navi_middle">About</li>
<li class="navi_last">Links</li>

このようにかけます。

li[class*="navi"] {
color: red;
}

divで先頭がlinkの連番のclassにスタイルを当てたい場合はこう。

<div class="link0">HOME</div>
<div class="link1">About</div>
<div class="link2">Links</div>
div[class^="link"] {
color: red;
}

ちなみに、HTMLの指定をなくせば〇〇を含んだすべてのclassを指定できますし。

[class*="link"] {
color: red;
}

classだけじゃなくて、idやtitleやsrcも指定できます。

div[title^="link"] {
color: red;
}

これらの記述を知っておけば、色々組み合わせることでCSSの行数をかなり減らすことができるんじゃないでしょうか。ぜひ参考にしてみてください。