複数のclassを適用させる

September 5, 2006

Movable TypeのCSSをいじってるて気がついた事。（今更？かもしれないけど）class属性は1つの要素に複数適用させる事が出来るって事。

<div class="sidebar pkg">
     <p>class属性は一つの要素に複数適用させる事が出来る。</p>
<div>

こんな記述をした場合はsidebarと言うclassとpkgと言うclassの2つのclassがこのdiv要素に適用されるって事。これによってfloatを含むdiv要素なんかをclearするpkgと言う汎用性のあるclassを作っておいて適用させるなんて使い方が出来る。

今まではid属性とclass属性と言う組み合わせしかダメなのかと思ってた...これでグっと幅が広がる気がする。

ちなみにMovable Typeのデフォルトのcssシートにはpkgと言うfloatをクリアさせ、外側のdivをきちんと下まで梱包してくれる汎用性のあるclassがちゃんと用意されてる。

.pkg:after {
    content: " ";
    display: block;
    visibility: hidden;
    clear: both;
    height: 0.1px;
    font-size: 0.1em;
    line-height: 0;
}
* html .pkg { display: inline-block; }
/* no ie mac \*/
* html .pkg { height: 1%; }
.pkg { display: block; }
/* */