class名を複数つけてみる

「class名を複数」というと、

CSS

h1,h2,h3,h4 {
font-size:20px;
}

のように、複数の要素等(セレクタ)にスタイルを一括してつけることがあります。

これなら

CSS

h1 {
font-size:20px;
}
h2 {
font-size:20px;
}
h3 {
font-size:20px;
}
h4 {
font-size:20px;
}

と書く必要がないので、スタイルシートがコンパクトになります。このときh1とh2の間は、スペースを空けずにカンマを入れて列記するだけ。

で、もう1つ、class名を複数使うというと

1つの要素に複数のクラスをつけるというのがあります。

(X)HTML

<div class="parag clearfix"><p>ああああ</p></div>

見習的には、クリアフィックスを適用するとき、よく使います。ここの場合、paragというクラスで、どれだけの幅で、どんなフォントを使って、とか段落のスタイルを決めていて、どこかでフロートなどを使っていて、クリアフィックスを適用しなければいけない段落のみ、clearfixというクラスも併記してました。こういう場合、paragクラスとclearfixクラスで記述内容が重複することはあまりないので、気にせず使っていました。同じように、colorを決めるクラスと、font-sizeを決めるクラスを併記しても問題が起きないです。

こういう記述をしたとき、ただ併記しただけの効果以上の利点があること、知りました。

(X)HTML

<p class="red">あかいろ</p>
<p class="blue">あおいろ</p>
<p class="red blue">むらさきいろ</p>

CSS

.red {
	color:red;
}
.blue {
	color:blue;
}
.red.blue {
	color:purple;
}

サンプルはこちら

3つ目の記述をすると、redとblueの両方のクラスが併記されている場合のみ、適用されるスタイルが作れます。

このとき、CSSで.red.blueのピリオドの前には、スペースなどをいれず、つめておきます。ここに半角スペースがはいってしまうと、「.redクラスの要素の下にある.blueクラスのついた要素にむらさきいろのフォントカラーがつきます」という子孫セレクタの記述になってしまいます。

CSS

p.red {
	color:red;
}
p.blue {
	color:blue;
}
p.red.blue {
	color:purple;
}

のように要素プラスclassという記述もOKです。

このような複数クラス名を使った指定をすると、便利な場合があるかと思います。

上記の場合、

(X)HTML

<p class="red">あかいろ</p>
<p class="blue">あおいろ</p>
<p class="purple">むらさきいろ</p>

CSS

.red {
	color:red;
}
.blue {
	color:blue;
}
.purple {
	color:purple;
}

でも、同じです。しかし、

CSS

.red {
	color:red;
	font-size:20px;
	font-weight:bold;
}
.blue {
	color:blue;
}
.red.blue {
	color:purple;
}

などのように、たくさんの属性を指定していく場合、便利さが増えるのではないでしょうか。

サンプルはこちら

では、それぞれの記述に重複するものがあった場合どうなるでしょうか。

(X)HTML

<p class="red">あかいろ</p>
<p class="blue">あおいろ</p>
<p class="red blue">むらさきいろ</p>
<p class="blue red">むらさきいろ</p>

CSS

.red {
	color:red;
	font-size:20px;
	font-weight:bold;
}
.blue {
	color:blue;
	font-weight:normal;
	font-size:30px;
}
.red.blue {
	color:purple;
}

サンプルはこちら

font-sizeやfont-weightが重複しています。

(X)HTMLのほうでclassにredとblueのどちらが先に記述されていても、CSSのであとからかかれたほうに上書きされています。

(X)HTMLは同じままで、CSSの順番を変えてみると、

CSS

.blue {
	color:blue;
	font-weight:normal;
	font-size:30px;
}
.red {
	color:red;
	font-size:20px;
	font-weight:bold;
}

.red.blue {
	color:purple;
}

サンプルはこちら

こんどはredのほうのスタイルが生きています。やはりCSSの原則どおり、上書きになります。

なんだか、頭がこんがらがりそうな、やっぱり基本が重要なような…。やっぱりウェブは呪文だらけだよっとつぶやく見習です。

コメントを残す

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

CAPTCHA


コメントフィード

トラックバックURL: https://pc.beginners-luck.net/pcwp/2011/12/13/multiple-class-css.html/trackback