CSSのセレクタについて。

CSSの「IDセレクタ」と「クラスセレクタ」についてなんですが、「クラスセレクタ」は先頭に要素名を指定して「要素名.クラス名」のようにすると指定された要素のみ有効になりますが、要素名が特定されていない場合には、どの要素でも指定することができる。「IDセレクタ」は
先頭に要素名を指定して「要素名#id名」のようにすると指定された要素のみ有効になりますが、要素名が特定されていない場合には、どの要素でも指定することができる。ただし、IDは唯一のものとしてとくていするものの識別子でありひとつのXHTML文章内で同じIDを複数の要素に指定することはできない。とセレクタについて調べた結果、こう解釈しているのですが、「IDセレクタ」を使用するメリットがイマイチわかりません！「ひとつのXHTML文章内で同じIDを複数の要素に指定することはできない。」以外は「IDセレクタ」と「クラスセレクタ」は同じ効果ではないんですか？それならすべて「クラスセレクタ」で統一した方がいいと思うのですが・・・長くなってすみません。

No.3 ベストアンサー 回答者： steel_gray 回答日時： 2008/04/11 10:17

セレクタに限っていうなら、たしかに統一する利点もあると思いますし、個人製作なら好きな自分ルールでかまわないと思います。

ただ、他人のソースを見たとき、
ID、CLASSのどちらを付けているかで、
それが一意であるか、ただの分類なのか、
という事が読み取れ、ページの構成を読み解く手がかりになるので使い分ける事にも利点はあると思います。

両セレクタの効果の違いについて他の方の回答通り。(IDを含むセレクタはとっても重い)
一応、詳細度に関する参考URLを挙げておきます。
http://refluxflow.net/2006/08/css_selector_speci …

この回答へのお礼

親切にありがとうございます。

お礼日時：2008/04/11 14:56

No.5 回答者： tenderfeel 回答日時： 2008/04/11 14:31

すべて「クラスセレクタ」で統一されてる、というのは初心者にありがちですね。

統一というより他の書き方を知らないだけでしょうが、
自分も昔書いたソースはそんな感じでした（笑

修正作業を自分しかしないなら別にそれでもいいのですが…。
そもそも全部クラスセレクタになるというのはXHTMLの「X」の意味とか、文書構造を理解されてないケースが多く、
とりあえずドキュメントタイプをXHTMLにして、Div使って組んで
やたらクラス付けてスタイル当ててる、という状況でよく当てはまります。
（逆に全部IDというのも見たことがある）

「ひとつのXHTML文章内で同じIDを複数の要素に指定することはできない。」
この特徴をしっかり把握してページを作るとメリットが体感できると思います。

この回答へのお礼

親切にありがとうございます。

お礼日時：2008/04/11 15:01

No.4 回答者： nori_007 回答日時： 2008/04/11 11:16

IDセレクタと、Clessセレクタの使い分けに関しては、XHTML で文章の構造化を意識すれば、自然に使い分けられるようになると思います。

スタイルシートで、単にデザイン与えるだけと考えると、IDセレクタ、Clessセレクタの使い分けはイメージが出来ないかも知れません。

スタイルシート単独だけで考えるのではく、XHTML で文章の構造化も合わせて考えてみてください。

直接の答えにならないと思いますが、ヒントになればと思います。

この回答へのお礼

親切にありがとうございます。

お礼日時：2008/04/11 14:57

No.2 回答者： Nine-nine 回答日時： 2008/04/11 07:28

classで行けるところはclassで統一した方がいいというのは、ある条件だと間違いではないです。

が、classでやっていてその場所だけ例外などが出てくるとidを指定します。idの方が詳細度が高いのです。

同じ場所でclassで赤の指定をしていてもidで青を指定すればidの指定が必ず勝ちます。最初に記述していても、後から記述していても青くなります。

この回答へのお礼

親切にありがとうございます。

お礼日時：2008/04/11 14:55

No.1 回答者： SAYKA 回答日時： 2008/04/11 05:13

こんな使い方

#TYPE_A .STYLE_1{color:red}
#TYPE_A .STYLE_2{color:#fdd}
#TYPE_B .STYLE_1{color:blue}
#TYPE_B .STYLE_2{color:#ddf}


<div id="TYPE_A">
　<span class="STYLE_1">○○</span>
　<span class="STYLE_2">○○</span>
</div>


このidを"TYPE_B"に書き換えると…
これだとdivだけどbodyでやる事もできるからテーマのような切り替えができる事になるね。
このidの名前をjavascriptで操作すると・・・・・(以下略

この回答へのお礼

親切にありがとうございます。

お礼日時：2008/04/11 14:54