CSSのセレクタ(#)とclassの賢い使い分け、組み合わせ方を教えてください。いままでclassばっかり使用していたのでいまいち#の恩恵が理解できていません。その他、CSSのワンポイントテクニックなど、ただのリファレンスより一歩進んだテクニックの紹介も歓迎です。

>>正しく使い分けている場合、IDは一カ所にしか使わないわけですから、

>この部分がよくわかりませんでした。もう少し調べてみます。

ややこしい書き方をしてすみませんでした。

サイト全体のことではなく、「ページ内に一度しか出てこない」という意味でした。

ただ、使い分けについて、「１度しか使わない」ということで使い分けるのは厳密

には違いますので、きちんと書かれているサイトを探してみました。

以下参考URL内の該当部分（ページの下の方です）をまとめておきます。

■ idとclassの意味

　id属性は、その要素に固有の名前を与えるために使います。

　class属性は、その要素がどういった属性というか分類なのかというような区別のために使われるものです。

■ 使い分ける意味(1)併用して使うことができる

　ひとつの要素に対してid属性とclass属性を併用することもできます。

■ 使い分ける意味(2)id属性のほうがスタイル適用の優先順位が高くなる特徴がある

　CSS的な側面からいうと、id属性やclass属性はセレクタとしての重要な役割を担っています。

　このとき、id属性のほうがスタイル適用の優先順位が高くなる特徴もあります

ココなど参考にしてみてはいかがですか？

#で定義するのは個人的にはあまり好きではないので、

classや、IDを使用しています。

私はこちらのサイトで勉強しています。

セレクタとクラスについては下のURLで触れています。

もぉ何年も前に書いてそのままにしているスクリプトで申し訳ないのですが、私は掲題URLのようにしようしています。

レイアウトてきなものは基本、classで指定して、

javascriptなどの為にidを使用してオブジェクトとして処理をしたいときは付加条件で#による指定をしています。

タグに対するスタイル＞

タグのclassにおけるスタイル＞

（idによるスタイルの指定＞）

最後にタグのエレメントとしての直接styleを書き込む、

というような順番で使用しています。

困ったときは、W3の仕様書をきちんと見ると書いてあります。参考に邦訳をいれておきます。

クラスは複数の要素に共通する分類を割り当てるもの

ID（IDセレクタ(#)）は文書内の一つの要素に注目して一意な識別子を割り当てるものです。

２番目の参照先でかかれているように、class と id は全くの別物ですので是非使い分けたい所です。

使い分けの恩恵として考えられるのは、CSSの効率化と、記述の見やすさでしょう。

正しく使い分けている場合、IDは一カ所にしか使わないわけですから、

メニュー部分はID=menu、本文部分はID=main、などのように、

内容にそって使用していれば、後でCSSを見直すときに大変見やすくなります。

３番目のリンク参照先のように、セレクタを組み合わせて使う場合、さらに恩恵に与れるかと思います。

また、併用して使うことができるのも恩恵のひとつだと思います。

蛇足：例を書いたのですが、長くなってしまう上に、はてなは記号（”とか）を変換してしまうのですね。

　　　かえってわかりにくいので省きました。

私の使い分けとしては

・汎用性のあるもの（ページ内に複数登場している、又は登場する可能性のあるもの）はclassを

・ユニークなもの（ページ内に一箇所しか存在しないもの）にはidを付けています。

※idはページ内で重複してはイケナイ、複数箇所に同じidを付けてはイケナイことになっています。

また、場合によっては一つの要素にclassとidの両方を付ける事もありますし、classを複数付ける事もあります。

<p id=”hoge” class=”hage uge”>

二つのclassでそれぞれ、レイアウト目的のスタイルと、色関係のスタイルを記述し、更に固有のスタイルを付けたしたい場合とか。

やりすぎるのもわかりづらくなるので、あんまりやりませんが。