ワイルドカードを使ったCSS

提供:wiki - PCスキルの小技・忘却防止メモ
移動: 案内, 検索

基本

▼例えば下記のような設定の場合

p.zebra-bold {
  line-height: 1.5em;
  font-weight: bold;
}

p.zebra-strong {
  line-height: 1.5em;
  font-weight: bold;
  font-size: 1.2em;
}

p.zebra-small {
  line-height: 1.5em;
  font-size: 0.8em;
}

上記の場合だと「zebra-」で始まるクラス全てに「line-height: 1.5em;」が含まれている。これがワイルドカード(?)を使うとまとめることが可能。

▼ワイルドカード(?)を使った記述

p[class^=zebra-] {
  line-height: 1.5em;
}

p.zebra-bold {
  font-weight: bold;
}

p.zebra-strong {
  font-weight: bold;
  font-size: 1.2em;
}

p.zebra-small {
  font-size: 0.8em;
}

▼[class^=zebra-]のトコの色々

文字 記述例 内容
* p[class*=○○○] {} pタグのクラス名に「○○○」が含まれる
^ p[class^=○○○] {} pタグのクラス名が「○○○」で始まる
$ p[class$=○○○] {} pタグのクラス名が「○○○」で終わる

良いか悪いかは知らないが・・・「p[class$=○○○]」ではなく「[class$=○○○]」と「p」タグを省略してもいけた。

注意

class属性の値をそのまま使うっぽいので順番に注意が必要。

<div class="zebra-bold">~
<div class="hoge zebra-strong">~

▼ダメな例:上記のようなHTMLで「zebra-」から始まるクラスに対してゴニョゴニョする

div[class^=zebra-] {
  line-height: 1.5em;
}
  • 一つ目の「<div class="zebra-bold">」は反映される
  • 二つ目の「<div class="hoge zebra-strong">」は反映されない

きっと他にいい方法があるはずなんだけど・・・下記のようにHTMLを修正

<div class="zebra-strong hoge">~

※「hoge zebra-strong」を「zebra-strong hoge」と順番を入れ替える

関連項目