ヘッダ内でcssを適用する際
ヘッダ内でcssを適用する際
ヘッダ内でdivにcssを指定する際に、
あるdivのクラスの構成を、div.oneclass{~}
{}内に記述しますよね?この時に、~内に、divの要素にクラスが指定されたpがある場合、
~内にp#onep{~}(id)やp.onep{~}(class)とcssを適用しても反映されないのは何故ですか?
独立して、p#onep{~}と書くと適用されます。
divの要素でも、cssを指定するときは、親ブロックとインラインは独立してるんでしょうか?
あるdivのクラスの構成を、div.oneclass{~}
{}内に記述しますよね?この時に、~内に、divの要素にクラスが指定されたpがある場合、
~内にp#onep{~}(id)やp.onep{~}(class)とcssを適用しても反映されないのは何故ですか?
独立して、p#onep{~}と書くと適用されます。
divの要素でも、cssを指定するときは、親ブロックとインラインは独立してるんでしょうか?
Re: ヘッダ内でcssを適用する際
オフトピック
もうこの掲示板なんでもありだな…
そもそも{}の前に指定するのは「セレクタ」と呼ばれるものであり、{}内に指定されたスタイルを適用する範囲を指定するものです。
{}内にはスタイルを記述するのであって、そこにp#onep{~}(id)やp.onep{~}(class)などといった他のセレクタを含める事はできないし、する必要もありません。
おそらくセレクタの使い方を理解されていないのだと思います。親ブロックとインラインなどという用語はCSSには存在しません。
セレクタの記法はたくさんありますが、例として「div.oneclassの子孫要素のp#onepの適用するスタイル」を指定する場合、 です。
「CSS セレクタ」と検索して勉強して下さい。
✜ で C ご ✜
: す + 注 :
¦ か + 文 ¦
: ? Is the は :
✜ order C++? ✜
: す + 注 :
¦ か + 文 ¦
: ? Is the は :
✜ order C++? ✜
糸冬
――――――――
制作・著作 NHK
――――――――
制作・著作 NHK
- softya(ソフト屋)
- 副管理人
- 記事: 11677
- 登録日時: 13年前
- 住所: 東海地方
- 連絡を取る:
Re: ヘッダ内でcssを適用する際
問題の有る具体例を書いて下さい。
ちなみにidに関しては、html内において1回しか登場してはいけません。
ちなみにidに関しては、html内において1回しか登場してはいけません。
オフトピック
一応、htmlなら問題なしじゃなかいと。株とかの話をされても困りますが。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。
Re: ヘッダ内でcssを適用する際
そうです。面倒くさいと思うかもしれませんが、セレクタで実現されるのは入れ子だけでなく隣接要素や直下要素、n番目の要素など豊富です。つまり入れ子構文より柔軟な選択が可能になります。jaljal さんが書きました:つまり、入れ子関係にあっても、head内では別々にcssを指定しなければいけないということでしょうか?
また、スタイルの指定はstyle属性とhead内のstyleタグ以外に、外部のCSSファイルにする方法もあります。外部ファイルでも同じ記述方法です。
ソフト屋さんが書いていますが、IDは重複が許されないものです。ですのでdiv.oneclass p#onepという指定は実際は冗長なものです。
ID指定の場合、#onepとだけ指定するのが最も正しく、また最も高速に動作します。
✜ で C ご ✜
: す + 注 :
¦ か + 文 ¦
: ? Is the は :
✜ order C++? ✜
: す + 注 :
¦ か + 文 ¦
: ? Is the は :
✜ order C++? ✜
糸冬
――――――――
制作・著作 NHK
――――――――
制作・著作 NHK
Re: ヘッダ内でcssを適用する際
✜ で C ご ✜
: す + 注 :
¦ か + 文 ¦
: ? Is the は :
✜ order C++? ✜
: す + 注 :
¦ か + 文 ¦
: ? Is the は :
✜ order C++? ✜
糸冬
――――――――
制作・著作 NHK
――――――――
制作・著作 NHK
- softya(ソフト屋)
- 副管理人
- 記事: 11677
- 登録日時: 13年前
- 住所: 東海地方
- 連絡を取る:
Re: ヘッダ内でcssを適用する際
classのabcがそもそも無いのと、css自体のブロック入れ子構造と言うのは出来ましたっけ?
こう思うになった元ネタサイトがあったら教えて下さい。
こう思うになった元ネタサイトがあったら教えて下さい。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。
- softya(ソフト屋)
- 副管理人
- 記事: 11677
- 登録日時: 13年前
- 住所: 東海地方
- 連絡を取る:
Re: ヘッダ内でcssを適用する際
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。
Re: ヘッダ内でcssを適用する際
先述の通り入れ子構造は出来ません。
その場合は、#children2もスタイルを個別に記述します。もし2つに同じスタイルを指定したいのなら、 とするのはどうでしょうか。
その場合は、#children2もスタイルを個別に記述します。もし2つに同じスタイルを指定したいのなら、 とするのはどうでしょうか。
✜ で C ご ✜
: す + 注 :
¦ か + 文 ¦
: ? Is the は :
✜ order C++? ✜
: す + 注 :
¦ か + 文 ¦
: ? Is the は :
✜ order C++? ✜
糸冬
――――――――
制作・著作 NHK
――――――――
制作・著作 NHK
蛇足ながら…
解決なさっているそうなのでよいのかもしれませんが、念のため補足しておきます。
> ヘッダ内で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でどう書いたらいいか? ということですよね。
ルール
は、BがAの孫(BがAの中にある)であるときにCSSを適用する構文です。
以上のルールによりjaljalさんが求めるCSS, CSSは、
となるでしょう。もそも同じchildlenでも親のdiv要素のクラス属性によってCSSを変えたい場合も
と簡単に指定できます。皆さんも仰っているとおり、class属性は複数の実態を表す抽象的な総称です。何回でも使い回せます。id属性はその要素をファイル内で一意に特定するための名称です。1回しか使えません。childlen(複数)なんてidはあんまりよろしくないかと……。
versionが古いですが、正しい知識を得たい人の爲のCSS2リファレンスなどに詳しく書かれていますので、これに限らず「自分の中の独自ルール」を持たないで「定められたルールだけ」を参照して頂けると今後も疑問が減るかもしれません。即ち、“とcssを適用しても反映されないのは何故ですか”ではなく「~の理由により(~と書かれているので)反映されるはずですが、反映されないのはなぜですか」まで突き詰められるといいと思います! (私もまだまだですが……)
> ヘッダ内で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つはスペースで区切ってある親の子孫要素であることを指定するものがあります。
は、BがAの孫(BがAの中にある)であるときにCSSを適用する構文です。
以上のルールによりjaljalさんが求めるCSS, CSSは、
div.oneclass { クラス属性oneclassを持つdivに適用するCSS }
div.oneclass p.childlen { divの子孫の内、クラス属性childlenを持つp要素に適用するCSS }
div.oneclass { クラス属性oneclassを持つdivに適用するCSS }
div.oneclass p.childlen { CSSa }
div.anotherclass p.childlen { CSSb }
versionが古いですが、正しい知識を得たい人の爲のCSS2リファレンスなどに詳しく書かれていますので、これに限らず「自分の中の独自ルール」を持たないで「定められたルールだけ」を参照して頂けると今後も疑問が減るかもしれません。即ち、“とcssを適用しても反映されないのは何故ですか”ではなく「~の理由により(~と書かれているので)反映されるはずですが、反映されないのはなぜですか」まで突き詰められるといいと思います! (私もまだまだですが……)
ζ*'ヮ')ζプログラミングはみんなで奏でるシンフォニー