CSSのセレクタについて。

すべて「クラスセレクタ」で統一されてる、というのは初心者にありがちですね。
統一というより他の書き方を知らないだけでしょうが、
自分も昔書いたソースはそんな感じでした（笑

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

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

投稿日時 - 2008-04-11 14:31:00

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

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

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

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

投稿日時 - 2008-04-11 11:16:04

classで行けるところはclassで統一した方がいいというのは、ある条件だと間違いではないです。が、classでやっていてその場所だけ例外などが出てくるとidを指定します。idの方が詳細度が高いのです。

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

投稿日時 - 2008-04-11 07:28:29

こんな使い方

#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 05:13:38