Q&A
質問タグはPHPではなく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スタイルが適用されていない)
ご教授お願いします。
回答1件
0
子結合子を使っているので、#BoxA > .BaseBoxは#BoxAの直接の子である.BaseBoxにしかスタイルを適用しないです。そのような要素は存在しないので、スタイルは適用されません。
子結合子 - CSS: カスケーディングスタイルシート | MDN
なお、継承は、セレクタを使ってするものではないです。自動的です。
まず、基礎を学んだ方がいいのでは。
投稿2022/06/04 02:47
編集2022/06/04 02:49
総合スコア37421
※ 書き方が悪かったので途中で編集しました。
なるほど、使い方がそもそも間違っているのですね。申し訳無いです。
追加でお聞きしたいことがあるのですが
調べてる最中に、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の要素を反映させたいのですが可能でしょうか？
> 一般的に継承をさせる際はこのような書き方になるのでしょうか？
お考えの通りです。
> <div class="BoxA">と記載する事でBaseBox+BoxAの要素を反映させたいのですが可能でしょうか？
CSSでは難しいでしょう。
Sass の mixin を使えば、似たようなことはできるかと思います。
https://blanche-toile.com/web/sass-mixin
---
なお、CSSのお話をするならば、Pyuiuoさんのおっしゃる継承とは「カスケード」のことだと思います。CSSの「継承」は「カスケード」とは別の概念です。誤解を生むかと思いますので、使い分けられた方がいいかと思います。
編集されたようですので、再回答します。
> 一般的に継承をさせる際はこのような書き方になるのでしょうか？
1については、おっしゃるとおりです。
2については、思うようにはいかないだろうと思います。
なお、CSSの用語ですと、1は「カスケード」、2は「継承」です。
あなたの回答
tips
プレビュー
