CSSの継承???

私はあまりWeb関係は得意ではないですが。

HTML + CSS でやるときに、CSSを外部 CSSファイルに書いたり、HTMLファイルのheadタグに直接埋め込んだりしますが、

ここで質問があります。

別のクラスやタグの定義を使いまわしたい場合があります。

その場合って、コピペしかないのでしょうか。

CSSファイルに記述して使いまわすという意味ではなく、

たとえば

th タグの一部の定義を td でも使いまわすみたいにです。

C/C++やJava だとコンポジションみたいな感覚で保持して差異だけ記述するみたいな。

例:

CSS
1/* default.css */
2
3
4th{
5    border:     2px solid #000000; /* 枠( border )をセット */
6    text-align: center; /* 文字(列)を中央寄せ */
7    width:      100px; /* 幅を100pxとする */
8    height:     21px; /* 高さを21pxとする */ 
9}
10
11
12td{
13    th; /* あくまでイメージ。コンポジション的な。 */
14    background-color: #FFFF00; /* 差異。背景を黄色にする */
15}

とやる感じです。

こういうのはクラスを定義して追加していくか、コピペしかないのでしょうか?

それとも簡単にする方法があるのでしょうか。

例では th, td という風にタグですが、

クラス名が違うだけの場合もあります。

たとえば元は (C/C++やJavaといった)コード用のクラスとして定義していたが、

流用してコード以外のフォーカスを当てたいもの用で使うとかです。

そのままだと .code{...} のようにコード用ですが、そこの範囲 ( div 等に埋め込んだ場合。 ) がコードではなく、

説明だったりとなります。

なんかしっくりこないので説明用クラスを定義するのはいいですが、CSSがほとんど同じであるため、
コピペになります。

これがコンポジションじゃないけど、差異だけを記述すればいいっていう感じだと楽なのになぁと。

くだらないかもしれませんが、お願い致します。

[環境等]
ブラウザ指定: Firefox, Opera, GoogleChrome, IE, その他

宜しくお願い致します。

行動規範の内容に同意します

回答3件

質問にあるような.code_aクラスを継承した.code_bクラスの定義といったものはcss単体では出来ないと思います。そういう記述を支援するスクリプトが存在するので、そちらを当たるのが良いと思います。

方法は異なりますが、HTMLの要素には色々な場所から色々なスコープでスタイルを指定できます
そして指定された全ての属性が有効になります。
同じ属性に複数の設定がある場合、優先順位の高いものが設定されます。
優先順位としては低いですが、「より後から読み込まれたスタイルが優先される」というルールがあるので

base.css

css
1.code {
2    border:     2px solid #000000; /* 枠( border )をセット */
3    background-color: #FFFF00; /* 背景を黄色にする */
4}

self.css

css
1.code {
2    background-color: #FF0000; /* 差異。背景を赤色にする */
3}

あるHTMLに base.css → self.css の順で読み込めば赤色になり、base.cssだけ読み込んだページは黄色になるでしょう。両方borderの設定は有効なはずです。

投稿2017/05/20 05:53

hirohiro

総合スコア2068

こういうことですか？

CSS
1th,td{
2    border:     2px solid #000000; /* 枠( border )をセット */
3    text-align: center; /* 文字(列)を中央寄せ */
4    width:      100px; /* 幅を100pxとする */
5    height:     21px; /* 高さを21pxとする */ 
6}
7
8
9td{
10    background-color: #FFFF00; /* 差異。背景を黄色にする */
11}

投稿2017/05/20 04:05

Lhankor_Mhy

総合スコア36074

ベストアンサー

例の場合ですと、こんな風に書けますね。

css
1th,td{
2    border:     2px solid #000000; /* 枠( border )をセット */
3    text-align: center; /* 文字(列)を中央寄せ */
4    width:      100px; /* 幅を100pxとする */
5    height:     21px; /* 高さを21pxとする */ 
6}
7
8td{
9    background-color: #FFFF00; /* 差異。背景を黄色にする */
10}