CSSにてスタイルを継承したい。

やりたい事

殆ど同じプロパティを持つスタイルが複数ある。
基底スタイルと派生スタイルを作り、記述を簡単にしたい。

問題

コードを書いたが、上手く継承出来ない。

コード

html
1<!DOCTYPE html>
2<html>
3
4  <head>
5    <style>
6      *{
7        padding: 0px;
8        margin: 0px;
9      }
10
11      p{
12        font-size: 30px;
13      }
14
15      .BaseBox{
16        width: 300px;
17        height: 300px;
18        margin: 50px;
19        background-color: green;
20      }
21
22      #BoxA > .BaseBox{
23        background-color: red;
24      }
25
26      #BoxB > .BaseBox{
27        background-color: blue;
28      }
29    </style>
30  </head>
31
32  <body>
33    <div class="BaseBox"><p>多分緑色</p></div>
34    <div id="BoxA"><p>多分赤色</p></div>
35    <div id="BoxB"><p>多分青色</p></div>
36  </body>
37  
38</html>

結果

BoxA, BoxBは色が変わるどころか、Boxも表示されない(BaseBoxスタイルが適用されていない)

ご教授お願いします。

m.ts10806

2022/06/04 02:16

質問タグはPHPではなくCSSでは。

Pyuiuo

2022/06/04 02:18

失礼しました。タグを変更しました。

回答1件

子結合子を使っているので、#BoxA > .BaseBoxは#BoxAの直接の子である.BaseBoxにしかスタイルを適用しないです。そのような要素は存在しないので、スタイルは適用されません。

子結合子 - CSS: カスケーディングスタイルシート | MDN

なお、継承は、セレクタを使ってするものではないです。自動的です。

カスケードと継承 - ウェブ開発を学ぶ | MDN

まず、基礎を学んだ方がいいのでは。

投稿2022/06/04 02:47

編集2022/06/04 02:49

Lhankor_Mhy

総合スコア33635

回答へのコメント

Pyuiuo

2022/06/04 04:08 編集

※ 書き方が悪かったので途中で編集しました。なるほど、使い方がそもそも間違っているのですね。申し訳無いです。追加でお聞きしたいことがあるのですが調べてる最中に、4つの結合子(.>~+)だといずれも子要素に対し影響を与え継承は自動で行われるとの事なので、以下の様な解決案を思い浮かびました。 1. .BaseBox, .BoxAと宣言する <div class="BaseBox BoxA"></div> 2. BaseBox, BaseBox>BoxAと宣言する <div class="BaseBox"> <div class="BoxA"> </div> </div> 一般的に継承をさせる際はこのような書き方になるのでしょうか？希望する書き方としては、CSS側でBoxAにBaseBoxの要素を引き継がせ <div class="BoxA">と記載する事でBaseBox+BoxAの要素を反映させたいのですが可能でしょうか？

Lhankor_Mhy

2022/06/04 04:16 編集

> 一般的に継承をさせる際はこのような書き方になるのでしょうか？お考えの通りです。 > <div class="BoxA">と記載する事でBaseBox+BoxAの要素を反映させたいのですが可能でしょうか？ CSSでは難しいでしょう。 Sass の mixin を使えば、似たようなことはできるかと思います。 https://blanche-toile.com/web/sass-mixin --- なお、CSSのお話をするならば、Pyuiuoさんのおっしゃる継承とは「カスケード」のことだと思います。CSSの「継承」は「カスケード」とは別の概念です。誤解を生むかと思いますので、使い分けられた方がいいかと思います。

Lhankor_Mhy

2022/06/04 04:32

編集されたようですので、再回答します。 > 一般的に継承をさせる際はこのような書き方になるのでしょうか？ 1については、おっしゃるとおりです。 2については、思うようにはいかないだろうと思います。なお、CSSの用語ですと、1は「カスケード」、2は「継承」です。