人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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」のスタイルが反映されません。
適切な方法を教えていただけないでしょうか。

●質問者: umakoya
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS sub スタイル レイアウト 定義
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● Platini
●15ポイント

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

◎質問者からの返答

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

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


2 ● lovely
●55ポイント

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

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

質問の例の場合、

div#main div.sub p { }

と書けば反映されます。

◎質問者からの返答

おー!できました!

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

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


3 ● lovely
●10ポイント

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の方法の方が簡単です。


4 ● lovely
●10ポイント

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


5 ● yoanium
●10ポイント

! 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>

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ