
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の行数をかなり減らすことができるんじゃないでしょうか。ぜひ参考にしてみてください。
