複合セレクタの利用

idやclassの数をもっと少なくすることができて、HTMLもCSSも、よりシンプルで整然とした見通しのよい品質を保つことができる方法があります

例えば、メニューのHTMLはどちらも同じ<li>タグを使うけど、見栄え(スタイル)は異なるといった場合、CSSは分ける必要があります。
ページ上部のメニュー同士は同じスタイル、ページ下部のメニュー同士は同じスタイルです。
<li>タグが登場するごとに新たなclassを追加していくと、ホームページを更新していくとき、リスト形式で表示するコンテンツが増えるごとにHTMLの中に新しいclassが増えてしまい、CSSにも新しいclassが増えていくことになります。
こうすると、最初の頃はよくても、どんどん更新が煩雑なホームページになってしまうのです。
このような問題をスッキリと解決するのが、「複合セレクタ」という記法です。

たとえば「#gNav li」は、「gNavという名前のidが付いたタグの内側の階層にある全ての<li>タグに割り当てるスタイル」という意味になります。
同様に「#fNav li」は、「fNavという名前のid が付いたタグの内側の階層にある全ての<li>タグに割り当てるスタイル」という意味になります。

ここで1つ、用語を覚えておきましょう。
「#gNav」や「li」のように、スタイルを指定するとき“どこに割り当てるのか”を表す部分のことを「セレクタ」と呼びます(selector:選択するもの)。
「#gNav」も1つのセレクタですし、 「li」も1つのセレクタです。
「#gNav li」のように、セレクタとセレクタの聞に半角スペースを挟んでつないだものを特に「複合セレクタ」と呼びます。

このように、CSSは必ずしも個別のidやclassに対して割り当てなくてはならないのではなく、特定のセレクタを起点としてさらにその内側にあるセレクタを対象として割り当てることができます。
こうすることで、本来は文書構造を定義するのが役割であるHTMLの中に、デザインと結びつけるための情報(idやclass などのセレクタ)を必要以上に増やさずに済み、 css も必要以上に新しいセレクタを増やす必要がなくなりますので、全体としてホームペー ジを構成するファイルの中身がシンプルになります。
言い換えると、ページ数や掲載内容が増えても修正量が少なくて済む「変更に強いホームページ」になるということです。
ホームページは作って終わりではなく、何年も運用していく中で担当者が変わることもあります。
最初に作る人が、CSSの3通りの指定方法やセレクタを適切に使い分けた作り方を意識していれば、ホームページの管理を外注しなくても、HTMLやCSSの基本的な知識を持った社員に管理を任せられるかも知れません。