ヘッダ内でcssを適用する際

jaljal · #1

ヘッダ内でdivにcssを指定する際に、
あるdivのクラスの構成を、div.oneclass{～}
{}内に記述しますよね？この時に、～内に、divの要素にクラスが指定されたpがある場合、
～内にp#onep{～}(id)やp.onep{～}(class)とcssを適用しても反映されないのは何故ですか？
独立して、p#onep{～}と書くと適用されます。
divの要素でも、cssを指定するときは、親ブロックとインラインは独立してるんでしょうか？

#2

オフトピック

もうこの掲示板なんでもありだな…

そもそも{}の前に指定するのは｢セレクタ｣と呼ばれるものであり、{}内に指定されたスタイルを適用する範囲を指定するものです。
{}内にはスタイルを記述するのであって、そこにp#onep{～}(id)やp.onep{～}(class)などといった他のセレクタを含める事はできないし、する必要もありません。

おそらくセレクタの使い方を理解されていないのだと思います。親ブロックとインラインなどという用語はCSSには存在しません。

セレクタの記法はたくさんありますが、例として｢div.oneclassの子孫要素のp#onepの適用するスタイル｣を指定する場合、

コード:

div.oneclass p#onep{
    適用するスタイル
}

です。

｢CSS セレクタ｣と検索して勉強して下さい。

jaljal · #3

つまり、入れ子関係にあっても、head内では別々にcssを指定しなければいけないということでしょうか？

#4

問題の有る具体例を書いて下さい。
ちなみにidに関しては、html内において１回しか登場してはいけません。

オフトピック

一応、htmlなら問題なしじゃなかいと。株とかの話をされても困りますが。

#5

jaljal さんが書きました:つまり、入れ子関係にあっても、head内では別々にcssを指定しなければいけないということでしょうか？

そうです。面倒くさいと思うかもしれませんが、セレクタで実現されるのは入れ子だけでなく隣接要素や直下要素、n番目の要素など豊富です。つまり入れ子構文より柔軟な選択が可能になります。
また、スタイルの指定はstyle属性とhead内のstyleタグ以外に、外部のCSSファイルにする方法もあります。外部ファイルでも同じ記述方法です。

ソフト屋さんが書いていますが、IDは重複が許されないものです。ですのでdiv.oneclass p#onepという指定は実際は冗長なものです。
ID指定の場合、#onepとだけ指定するのが最も正しく、また最も高速に動作します。

jaljal · #6

コード:

ヘッダ
div.abc{
p#children{text-indent: 3em}
}
ヘッダ

ボディー
<div class="parents">
<p>こんにちは</p>
<p id="children">子供です。</p>
</div>
ボディー

#7

コード:

<html>
    <head>
        <style>
            #children{
                text-indent: 3em;
            }
        </style>
    </head>
    <body>
        <div class="parents">
            <p>こんにちは</p>
            <p id="children">子供です。</p>
        </div>
    </body>
</html>

#8

classのabcがそもそも無いのと、css自体のブロック入れ子構造と言うのは出来ましたっけ？
こう思うになった元ネタサイトがあったら教えて下さい。

jaljal · #9

すいません、abc→parentsに訂正です。

jaljal · #10

コード:

<html>
    <head>
        <style>
            #children{
                text-indent: 3em;
            }
        </style>
    </head>
    <body>
        <div class="parents">
            <p>こんにちは</p>
            <p id="children">子供です。</p>
        </div>

       <div class="parents2">
            <p>こんにちは</p>
            <p id="children2">子供だよ。</p>
        </div>
    </body>
</html>
[code/]


こういう場合も#一個で大丈夫なんですか？

#11

プレビューで確認して下さいね。

コード:

[code/]

ではなく[/code]です。

#12

先述の通り入れ子構造は出来ません。
その場合は、#children2もスタイルを個別に記述します。もし2つに同じスタイルを指定したいのなら、

コード:

<html>
    <head>
        <style>
            .Children{
                text-indent: 3em;
            }
        </style>
    </head>
    <body>
        <div class="Parents">
            <p>こんにちは</p>
            <p id="children" class="Children">子供です。</p>
        </div>

        <div class="Parents2">
            <p>こんにちは</p>
            <p id="children2" class="Children">子供だよ。</p>
        </div>
    </body>
</html>

とするのはどうでしょうか。

jaljal · #13

しんなづきさん、ありがとうございました。
スッキリしました。
それで何とかいけそうです。

milfeulle · #14

解決なさっているそうなのでよいのかもしれませんが、念のため補足しておきます。

> ヘッダ内でdivにcssを指定する際に、
head要素内でなくてもCSSは書けます。外部ファイルにしても同じです。

> あるdivのクラスの構成を、div.oneclass{～}
> {}内に記述しますよね
“divのクラス"というよりも、「div要素のうち、class属性がoneclassであるもの」ですね。

>～内にp#onep{～}(id)やp.onep{～}(class)とcssを適用しても反映されないのは何故ですか？
> 独立して、p#onep{～}と書くと適用されます。
> divの要素でも、cssを指定するときは、親ブロックとインラインは独立してるんでしょうか？
ご質問は要素Xがあって、その要素X内に子供要素Cが含まれるとき、CSSでどう書いたらいいか? ということですよね。

ルール

CSS(大文字です)では、{ から }のなかに宣言「プロパティ:値」を0個以上並べることができます。それ以外は書けません。区切りは;を使います。最後のものだけ省略できます。
セレクタ { 宣言(複数) }のようにセレクタを{}の前に書きます。セレクタはCSSを適用する要素を限定するためのルールです。
セレクタはさまざまな構文がありますが、そのうち1つはスペースで区切ってある親の子孫要素であることを指定するものがあります。

A B { }

は、BがAの孫(BがAの中にある)であるときにCSSを適用する構文です。

以上のルールによりjaljalさんが求めるCSS, CSSは、

コード:

div.oneclass { クラス属性oneclassを持つdivに適用するCSS }
div.oneclass p.childlen { divの子孫の内、クラス属性childlenを持つp要素に適用するCSS }

コード:

<div class="oneclass">
<p class="childlen"></p>
</div>

となるでしょう。もそも同じchildlenでも親のdiv要素のクラス属性によってCSSを変えたい場合も

コード:

div.oneclass { クラス属性oneclassを持つdivに適用するCSS }
div.oneclass p.childlen { CSSa }
div.anotherclass p.childlen { CSSb }

と簡単に指定できます。皆さんも仰っているとおり、class属性は複数の実態を表す抽象的な総称です。何回でも使い回せます。id属性はその要素をファイル内で一意に特定するための名称です。1回しか使えません。childlen(複数)なんてidはあんまりよろしくないかと……。

versionが古いですが、正しい知識を得たい人の爲のCSS2リファレンスなどに詳しく書かれていますので、これに限らず「自分の中の独自ルール」を持たないで「定められたルールだけ」を参照して頂けると今後も疑問が減るかもしれません。即ち、“とcssを適用しても反映されないのは何故ですか”ではなく「～の理由により(～と書かれているので)反映されるはずですが、反映されないのはなぜですか」まで突き詰められるといいと思います! (私もまだまだですが……)

		4月 2024
日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

ヘッダ内でcssを適用する際

ヘッダ内でcssを適用する際

Re: ヘッダ内でcssを適用する際

Re: ヘッダ内でcssを適用する際

Re: ヘッダ内でcssを適用する際

Re: ヘッダ内でcssを適用する際

Re: ヘッダ内でcssを適用する際

Re: ヘッダ内でcssを適用する際

Re: ヘッダ内でcssを適用する際

Re: ヘッダ内でcssを適用する際

Re: ヘッダ内でcssを適用する際

Re: ヘッダ内でcssを適用する際

Re: ヘッダ内でcssを適用する際

Re: ヘッダ内でcssを適用する際

蛇足ながら…