CSSの継承について

質問

CSSの定義時の継承方法についての質問です。
具体的には、便利な .clearfix というクラスを基に新しいコンテンツクラス、またはIDを作りたいのですが、その様な継承方法はありますか？
新しいクラスやIDでは、widthやbackgroundを指定したいのです。
C++風に書くと
#my_contents : .clearfix
{
　width: 800px;
　background: #FFF;
}
こんな感じになると思うのですが...
よろしくお願いします。

回答No.1

神崎 渉瑠（@taloo） · ベストアンサー

CSSの継承の概念は、OOPのとは異なり、たんなる上書きに過ぎません。

common.css
-----------
#my_contents {
width: 800px;
}
-----------

index.css
-----------
@import url(common.css);

#my_contents {
background: #FFF;
}
-----------

と定義する事で、
index.cssを読み込んだHTMLファイルには、
#my_contents{
width:800px;
background:#FFF;
}
が指定されたと見なされます。

たとえば、menu.cssに
@import url(common.css);
#my_contents{
backgroud: #FF0;
}
と書いておくと、widthもコピーされますので、
これにより、widthを毎回書かなくても、common.cssの1回だけですべてのファイルで指定したことになる（common.cssの内容が継承される)、変更があった場合はcommon.cssを書き直しだけで終わるというメリットがあります。

というわけで、
> 具体的には、便利な .clearfix というクラスを基に新しいコンテンツクラス、またはIDを作りたいのですが、その様な継承方法はありますか？
このような方法はありません。

ただし、
.clearfix{
　width: 1000px;
bakground: #FFF;
}
.narrow{
width: 800px;
}

と2種類書いておき、
<div class="clearfix clearfix2">
のように、両方を適用させる事も出来ます。

両方に定義されたプロパティは、後から指定したもので上書きさるので、
width:800px;
background:#FFF
が使われます。

お礼

なるほど、CSSのクラスとはこういうものなのですね。ちょっとがっかりでした。
大変丁寧で分かりやすい解説をありがとうございました。

回答No.3

神崎 渉瑠（@taloo）

> なるほど、CSSのクラスとはこういうものなのですね。ちょっとがっかりでした。

もしクラス＝OOPと考えてらっしゃるなら、その固定概念は消した方が良いですよ。
たしかにJAVAやC++、PHPなどはclassというキーワードが使われますが、
JavaScriptではfunctionまたはObject、Perlではpackageというキーワードが使われます。
また、CSS（厳密にはHTML）ではclassというキーワードがありますが、これは単なるグループ分けの意味であって、OOPではありません。

お礼

お礼と締め切るのを忘れていました。
とりあえず教えて頂いたようにclassを２つ指定することで解決しました。
でもこれだと文書(html)とデザイン(css)の分離という意味ではあまり良いできではないですね。まぁ、それほど厳密な規則で作っている物ではないので問題はないですが。
いずれにしろありがとうございました。

回答No.2

神崎 渉瑠（@taloo）

> <div class="clearfix clearfix2">

<div class="clearfix narrow">
に訂正です。