
外部スタイルシートで定義したスタイルの継承のようなものは可能でしょうか?
以下、例で説明すると、「main」スタイルを「sub1」と「sub2」が継承し、
「sub1」は「main」の「color」を継承し、「text-align」をオーバーライドしたい。
「sub2」は「main」の「text-align」を継承し、「color」をオーバーライドしたい。
【例 : 外部スタイルシート】
.main {
color : red;
text-align : center;
}
.main.sub1 { ←実際はこのような指定ではできない
text-align : left;
}
.main.sub2 { ←実際はこのような指定ではできない
color : blue;
}
【例 : htmlファイル】
<div class="sub1">あいうえお</div> ←左寄せ&赤字にしたい
<div class="sub2">あいうえお</div> ←センタリング&青字にしたい
No.3ベストアンサー
- 回答日時:
#2です。
> .main.sub1 { ←実際はこのような指定ではできない
一応、その書き方も有りです。
例えば、以下のように。
--------
<style type="text/css"><!--
.main { color: orange; text-align : center; }
.main.sub1 { color: blue; }
--></style>
</head>
<body>
<div class="main sub1">あいうえお</div>
--------
No.4
- 回答日時:
継承については、スタイルシートの基本中の基本でここを理解していないと決してスタイルシートは使いこなせません。
スタイルシートの継承については、継承されるプロパティとそうでないプロパティがあってそれを理解しておけばよい。
★カスケード:上書きされるか否かは、詳細度と優先順位の話で継承とは別次元の問題です。
具体的な例をあげるとわかるかな??
たとえば次のようなHTMLがあるとします。
★わかりやすいように全角スペースでインデントされているのでテストするときは、全角スペースをタブに変換すること★
<body>
<h1>見出し</h1>
<div class="main">
<h2>見出し(2)</h2>
<div>
<p>段落</p>
<p>段落</p>
</div>
<div class="memo">
<p>段落</p>
<div>
<p>段落</p>
</div>
</div>
<div class="note">
<p>段落</p>
</div>
</div>
<p>段落</p>
</body>
ひとつのスタイルシートに、
div div{color:gray}
div.note{color:magenta} /* 詳細度11 */
div.main div.note{color:blue} /* 詳細度22 */
div div div{color:red} /* 詳細度3 */
div div.main div{color:green} /* 詳細度13 */
div.main p{color:black;} /* 詳細度12 */
body{color:pink} /* 詳細度1 */
div.memo{color:skyblue}
さて、colorは継承されるプロパティですからどのように解釈されるでしょう。
例に挙げられたHTMLが
<div class="main">
<div class="sub1">左寄せ&赤字にしたいあいうえお</div>
<div class="sub2">センタリング&青字にしたいあいうえお</div>
</div>
や
<div class="main sub1">左寄せ&赤字にしたいあいうえお</div>
<div class="main sub2">センタリング&青字にしたいあいうえお</div>
だと簡単で、いずれも
div.main{color:red;text-align:center}
div.sub1{text-align:left}
div.sub2{color:blue}
ですみます。(詳細度が同じだと後出の物で上書きされる。)
★最低限仕様書には目を通しておこう
6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
No.2
- 回答日時:
「.main をprototypeとして、他のクラスセレクタにスタイルを継承させたい。
」その発想に至った気持ちは分かりまが、既存のCSSだけでは実現できないと思います。
CSSで行われる継承は「親要素からの継承」を指していて、それ以外で似た機能は「カスケード」ぐらいです。
この2つを上手く利用してください。
--------
<style type="text/css"><!--
.main { color : red; text-align : center; }
.sub1 { color: blue; text-align : left; }
.sub2 { color : green; }
--></style>
</head>
<body>
<div class="main sub1">あいうえお</div>
<div class="main sub2">かきくけこ</div>
--------
値わりあて,カスケード処理,継承 - CSS2リファレンス
http://hp.vector.co.jp/authors/VA022006/css/casc …
No.1
- 回答日時:
■CSSと継承
タイポグラフィーに関する部分は継承します。
http://css.eweb-design.com/0108_bsc.html
■CSSのネストはスペースで。。
△はスペース
.main△.sub {
}
これで、意味わかりますよね。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
idの中のid指定
-
HTML要素のid/class名の長さに...
-
最近、HTMLのヘッダーをIDで定...
-
ブログの本文のみリンク色を変...
-
Bootstrap 訪問済みテキストリ...
-
クリッカブルマップにツールチ...
-
htmlとcssで吹き出しの中に文字...
-
cssでリンクの文字と画像の...
-
CSS, リンクの色を一部変えるに...
-
htmlの文字が縦書きになる
-
html/cssの、navを2段にする...
-
CSSで改行後の行間調整
-
div要素が重なってします
-
ulタグやliタグの中でbrタグ...
-
html の divとtable の役割
-
既婚男女の方、結婚前と結婚後...
-
onmouseoverで文章を入れ替える
-
スクロールバーの色 ぷっくりと
-
スペースを使わず文字位置を揃...
-
【CSS】ヘッダーの高さが不明の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個別にリンクの色を変える方法
-
HTML要素のid/class名の長さに...
-
記事タイトルの横にコメント数...
-
idの中のid指定
-
CSSのクラス名・ID名の指定でワ...
-
CSSに同じclass名がいっぱい‥。...
-
liリストタグの背景色に色がつ...
-
最近、HTMLのヘッダーをIDで定...
-
brにクラスをつけてcssでdispla...
-
Bootstrap3でcontainerがずれる...
-
サイトにjQueryが使用されてい...
-
ラジオボタンの装飾(色の違う2...
-
リンク文字の 一部だけ色を変...
-
htmlのid属性って必要なの?
-
CSS, リンクの色を一部変えるに...
-
このようなHTMLのコードがあっ...
-
同ページ内でリンクの色を変え...
-
子孫セレクタの読み方をおしえ...
-
ブログの本文のみリンク色を変...
-
CSS内で使われる山括弧の意味が...
おすすめ情報