CSSでワイルドカード(アスタリスク)を利用するやり方

似たようなクラス名があるとき、全て同じスタイルを設定したいときがあります。

<div class="thumbnails-1"></div>
<div class="thunbnails-2"></div>

例えば上にあるクラス設定に対してスタイル設定をするときは、セレクター1つ1つ設定していくと下のような設定をしていくことになります。

.thumbnails-1 { font: 12px; }
.thumbnails-2 { font: 12px; }

CSSでワイルドカードを使う

上に例にあるように、同じ設定をするのにセレクター1つ1つにスタイルを設定していくのではなく、まとめてスタイルを設定する方法としてワイルドカードを利用すると便利です。

上記のthubnails-1とthumbnails-2を例にすると、下のように書くことでまとめてスタイルを設定することができます。

div[class*="thumbnails-"] { font: 12px }

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です