クラスベースのオブジェクト指向プログラミング言語(C++ とか)ではクラスを継承して少し動作の異なるクラスを定義することができます。CSS でも直接的ではないですが似たようなことができます。

CSS では複数のクラスを同時に指定した時に適用されるスタイルを書くことができます。

p {
    color: black;
}

.foo.bar {
    color: red;
}
<p class="foo">黒い</p>
<p class="bar">黒い</p>
<p class="foo bar">赤い</p>

さらに、.foo.bar と書いた場合は .foo より詳細度が高いため、優先して適用されます。つまり上書きすることができます。ちなみに .foo.bar.bar.foo は同じ意味になります。

p {
    color: black;
}

.foo {
    color: blue;
}

.foo.bar {
    color: red;
}
<p>黒い</p>
<p class="foo">青い</p>
<p class="foo bar">赤い</p>

オブジェクト指向プログラミング言語の場合とは異なり、派生クラスの方にしか興味がなくても、基底クラスを明記する必要があります。class="bar" とだけ書いても期待通りの結果には(必ずしも)なりません。

なお、CSS で単に継承と言った場合、この記事で言っている継承とは異なり、親要素に適用されているスタイルに従って子要素のスタイルが決定される動作のことを指します。

Trackback

no comment untill now

Add your comment now