CSSの質問です。下記のようなレイアウトをしています。

<div id="main">
<p>  </p>
<div class="sub">
<p>  </p>
</div>
</div>
そこで下記の二つにスタイルを定義しました。
div#main p{ }
div.sub p{ }
しかし「div#main p」のスタイルのみで「div.sub p」のスタイルが反映されません。
適切な方法を教えていただけないでしょうか。

回答の条件
  • 1人5回まで
  • 登録:2006/07/14 18:32:05
  • 終了:2006/07/15 15:51:48

回答(5件)

id:Platini No.1

Platini回答回数1ベストアンサー獲得回数02006/07/14 18:45:34

ポイント15pt

idとclassを逆に使ってみてはいかがでしょうか?

id:umakoya

class="sub"は複数出現する予定なのです。

できればこの構造は変更せず、CSS側でうまく処理したいのですが。

2006/07/14 19:33:07
id:lovely No.2

lovely回答回数88ベストアンサー獲得回数102006/07/14 19:33:04

ポイント55pt

id と class では優先度が異なるためです。

http://www.anslasax.net/css-make/cascade.html

質問の例の場合、

  div#main div.sub p { }

と書けば反映されます。

id:umakoya

おー!できました!

div#main p{ }にdiv.sub p{ }のスタイルを上書きと言う形ですね。

これでもいけますが、div#main p{ }のスタイルを全く継承しない方法があれば幸いです。

2006/07/14 19:37:23
id:lovely No.3

lovely回答回数88ベストアンサー獲得回数102006/07/14 20:20:52

ポイント10pt

div.sub p が div#main の中に入っているので、通常の方法では必ず継承されてしまいます。これを回避するには、以下の2つの方法があります。


1. HTMLの構造を変える。例えば

  <div id="main">
    <p> </p>
  </div>
  <div class="sub">
    <p> </p>
  </div>

のようにすれば、質問文のCSSのままで div#main p のスタイルはdiv.class p には継承されなくなります。


2. !importantを使う

 1回目の回答で出したURLにもありますが、優先させたいプロパティに!importantをつけることによって優先度を変えることができます。但し、プロパティごとに指定しなければなりませんので、どちらかというと1の方法の方が簡単です。

id:lovely No.4

lovely回答回数88ベストアンサー獲得回数102006/07/14 20:26:16

ポイント10pt

すみません。2回目の回答に不備がありました。2の方法は結局1回目の回答の上書きと同じ意味になってしまうので、上書きはしないで、かつ、div#main p のすべてのスタイルを継承させたくない場合は、HTMLの構造を変えるしかないと思います。

id:yoanium No.5

yoanium回答回数22ベストアンサー獲得回数02006/07/14 21:08:58

ポイント10pt

! importを使用するのはどうでしょうか?

<style>

div#main p{ color:red; }

div.sub p{ color:blue ! important; }

</style>

<div id="main">

<p>xxxx</p>

<div class="sub">

<p>yyyy</p>

</div>

</div>

  • id:umakoya
    HTMLの構造を変えずにCSSを上書きする方法を取りました。
    ありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません