複数の要素で指定したいのですが

0   名前： ギンペイ ： 2007/01/22（月） 16:37  ID:r1fKlZTQ sub-v7
こんにちは、お世話になります。

カンマで区切って複数の要素を指定する記述をしているときにこのような記述をしてみましたら
反映されないのですが、この指定の仕方は間違ってますか？

最初いくつかのラベルに対してバックグラウンド色を指定して、後述で特定の幾つかのラベルの色をまとめて（ここではdiv.pとにしてありますが）変更したいのです、

mainのＡラベルはいいのですが、
subのＣ．Ｄラベルを一緒に色を変えたいのですが、
#sub div .p {
background-color:red;
}
ではいけないのでしょうか。

なにとぞ宜しくお願いいたします。



<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict.dtd'>
<HTML lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE></TITLE>
<meta http-equiv="content-script-type" content="text/javascript">

<STYLE TYPE="text/css">
<!--

body { background-color:#37393B;
color:#000000;
font-weight:bold;
margin-top:18px;
margin-left:20px;
}



#main {
background-color:#ACACAC;
width: 300px;
height:200px;
line-height:12pt;
margin : 20px;
}


#sub
{
background-color:#767676;
width: 300px;
height:200px;
line-height:12pt;
margin : 20px;
}



.label {
width: 200px;
height:40px; margin: 20px auto;
background-color:#99C8F0;
}



/*この記述でmainのＡラインのバックの色を変えることができます */

#main div {
background-color:red;
}



/*このようにdivとp など幾つかの要素を同時に指定することは出来ませんか */

#sub div　,p {
background-color:red;
}


-->
</style>

</head>
<body>



<div id="main">
main
<div class="label">A ラベル</div>
<p class="label">B　ラベル</p>
</div>


<div id="sub">
sub
<div class="label">C ラベル</div>
<p class="label">D　ラベル</p>
</div>


</body>
</html>
















1   名前： K+S ： 2007/01/22（月） 16:37  ID:nROqylMa sub-YS
mainのＡラベルはいいのですが、
subのＣ．Ｄラベルを一緒に色を変えたいのですが、
#sub div .p {
background-color:red;
}
ではいけないのでしょうか。

入力ミスをする可能性がある限り、検証すべきソースコードの手打ちは避けましょう。
以下と一致していません。


#sub div　,p {
background-color:red;
}

全角スペースが記述されています。
2   名前： ギンペイ ： 2007/01/22（月） 16:37  ID:5cdxQ311 sub-v7
K+Sさん、

アドバイスありがとうございます。
そうですね、全角は行けませんね、
しかし”#sub div .p {
background-color:red;
}
では、やはり両方のバックカラーは変わらないのですが、
何所が悪いのかなー。
3   名前： key-child ： 2007/01/22（月） 16:37  ID:2kGJVJwY sub-bK
> subのＣ．Ｄラベルを一緒に色を変えたい
#sub div, p {
 background-color:red;
}

だと、「sub配下のdiv要素」と「p要素」に反映されます。
なので、下記のように両方に指定します。

#sub div, #sub p {
 background-color:red;
}


後、.（ピリオド）ではなく,（カンマ）です。
4   名前： ギンペイ ： 2007/01/22（月） 16:37  ID:5cdxQ311 sub-v7
key-child さん、

お答えありがとうございます。

複数の時は、カンマですよね、
カンマでもやはり結果は同じなのです。

どこかが間違っていると思うのですが、、、、、。
5   名前： key-child ： 2007/01/22（月） 16:37  ID:2kGJVJwY sub-bK
>>3でできることは確認しておりますので、現在のソースを載せていただかないことにはなんとも・・・
6   名前： ギンペイ ： 2007/01/22（月） 16:37  ID:5cdxQ311 sub-v7
key-child さん

ありがとうございます。

現在のソースは上記されておりますが。
7   名前： key-child ： 2007/01/22（月） 16:37  ID:2kGJVJwY sub-bK
>>1, >>3を直した結果、できないソースが欲しかったのですが・・・

>>1, >>3を反映させれば表示できてるように思われます。
8   名前： ギンペイ ： 2007/01/22（月） 16:37  ID:ZKTZ2QqX sub-v7
key-child さん

アドバイスありがとうございます。
そうですね、key-child さんの記述で全く問題な表示されます。上記[４]では私の
勘違いでした、適切なご指摘で感謝いたします。

ただ私の勉強不足で、

”〜だと、「sub配下のdiv要素」と「p要素」に反映されます。
なので、下記のように両方に指定します。
”
という理屈が少し分からず腕組みをしている状態です。
＃sub　配下のdivとｐを指すのは”#sub div　,p {〜”ではなぜいけないのかがよくわかっていないのです。
また勉強してみます。

どうもありがとうございました。
9   名前： key-child ： 2007/01/22（月） 16:37  ID:8GUFlW2K sub-DR
カンマはただの区切りなのでsub配下のdivとpに適用する場合を分けて考えればわかると思います。
#sub div, #sub p {
 background-color: red;
}

↓一緒です↑
#sub div {
 background-color: red;
}
#sub p {
 background-color: red;
}




また、なぜだめだったかを分けて考えればわかると思います。
#sub div, p {
 background-color: red;
}

↓一緒です↑
#sub div {
 background-color: red;
}
p {
 background-color: red;
}

10   名前： ギンペイ ： 2007/01/22（月） 16:37  ID:N99naeSI sub-v7
key-child さん

何度も御回答いただいて本当にありがとうございます。

今回説明をいただいたことでスッキリと理解できました。まさに溜飲が下がるおもいです。
いく冊かの教則本（というのでしょうか）を開いてみますと、
要素にスタイルを設定する方法として、

子孫セレクタとして：＃sub 要素内の　p にスタイルを適用させる場合は、
#sub p {〜}
とあり、
複数のセレクタとして：「,」カンマで区切って複数の要素を指定することができる。
dev , p {〜}
とあります。
この２つの記述方法をあわせて記述してしまうのは間違いだったのですね。

よく分かりました。本当にありあが等ございました。

一覧へ戻る