ＣＳＳのＣＬＡＳＳとＩＤについて教えてください

質問

ＣＳＳのＣＬＡＳＳとＩＤについて教えてください。ＩＤはＤＩＶと関係なければ別の上下関係ですか？？

回答No.1

ORUKA1951 · ベストアンサー

それはCSSではなく、HTMLの知識ですよ。
いずれにしても、この様な場所で説明するには複雑な話です。自身で身につけてください。

(簡単に)・・・相当、はしっょてありますが、どこを学べばよいかのポイントは書いてある。

　HTML(Hype Text Markup Language)とは、文書をそれを構成する要素(Element)に分けて、それぞれがどんな要素(Element)であるかをタグを用いてマークアップする言語です。--デザインは一切関係ありませんね。
　それが、スクリーンブラウザで見ると<h1></h1>(heading Level1)でマークアップされていたテキストが太字の大きな文字で表示されたり、読み上げブラウザでは男声で大きな声で読み上げられるのは、そのブラウザがもつスタイルシートでプレゼンテーションが決められているからです。
　この最も根幹は、しっかり理解しておく必要があります。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

　idやclassは、文字通りの意味で、中学校2年生1組　山田太郎　という男の子は
<span class="name male jk grade2 class1" id="TarouYamada">山田太郎</span>
　とマークアップすると、classは半角スペースで区切られたリストで、それぞれのclassに所属すると言う意味を持っています。当然、同じHTML内に、
name
male
jk
grade2
class1
　の値を持つ物がゼロ個以上存在します。【ゼロ個以上==なくてもよい】
　しかし、id値をもつ要素は、そのHTML内ではひとつしか現れてはなりません!!!

　言い換えれば、世間一般的な意味でのclass、idと考えれば良いです。

＞ＩＤはＤＩＶと関係なければ別の上下関係ですか？？
　ID(やclass)は、DIVに限らず、すべての要素に付けることが可能な属性です。これは上を理解していれば分かるはずです。
　DIVに限らず・・
「id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」
　のものであって、決して、断じて!!スタイルシートのためではありません。HTML4.01までは、文書構造を示す要素(タグ)が不足していたためにidやclassと組み合わせて使ってきたのです。!!!
　<div class="section" id="section1"></div>と囲まれていれば、この部分がセクション(本文)であることが、著者にも検索エンジンにもすぐ分かります。リンク先としてidが使えます。
★次期、HTML5では文書構造を明確に示す要素(タグ)が追加されて、DIVは原則として使わなくなります。!!<section id="section1"></section>になる。

　これらの基礎知識がないと、本題の説明の意味が分からないでしょう。

＞ＩＤはＤＩＶと関係なければ別の上下関係ですか？？
　h1,divなどは、HTMLでは要素(Element)と呼ばれています。スタイルシートでは、これを「タイプ」と言います。タイプを使った指定(セレクタ)は、タイプセレクタ
　span{color:red;}とすれば、span要素の文字は赤くなります。

　classは、スタイルシートではクラスセレクタと呼ばれ、要素セレクタのひとつです。
　span.male{color:blue;}とすると、class属性の値にmaleをもつspanと言う意味になります。span[class~=male]{color:blue;}と全く同じ意味です。

　idはスタイルシートでは一意セレクタと呼ばれます。
　span#TarouYamada{font-weight:bold;}は、id要素の値にTarouYamadaを持つものに適用されます。

　それぞれ、タイプセレクタは詳細度[0,0,0,1]、要素セレクタ/クラスセレクタは詳細度[0,0,1,0]、一意セレクタは[0,1,0,0]として優先度が計算されます。上記
span{color:red;}
span.male{color:blue;}
span#TarouYamada{font-weight:bold;}
　はどの順番で現れても、期待通り表示されるはずです。

　確かに、その意味では上下関係ですが、
span.male.grade2{font-size:2em;}は、詳細度が[0,0,2,1]
span.male{text-decoration:underline;}は詳細度が[0,0,1,1]
span#TatouYamada{font-size:1em;text-decoration:none;}は詳細度が[0,1,0,1]
ですから、どのように動作するかも分かると思います。

最低限
　⇒HTML 4.01 Specification (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )
　に目を通して、HTMLを正しく理解すること
スタイルシートは
　⇒Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html )
　ですが、上記に関わるところは
　　5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html )
　　6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )
です。

お礼

ご丁寧に有難うございます