今日は、スタイルシートについて、苦労して設定した箇所についての備忘録です。知ってる人には当たり前の知識でも、知らない人にとっては、意味のあることかも知れません。
いろんなキーワードで検索してもそれらしきものが出てこず、自分で設定したので、同様の症状でお悩みの方の参考になればと出稿します。
＜ポイント＞
・スタイルシートでセレクタ毎に要素を設定する場合、より特定のセレクタから記述していけば上手くいった。
・スタイルシートを記述していて、上手く装飾できなかった場合、記述の文法を疑うのと同時に、書いている場所を疑い、より前に記述すると上手くいく場合がありそうな気がする。
１．本日の論点
私が書くまでもなく、スタイルシートにはIDセレクタとclassセレクタがあり、その使い方はある程度法則化されています。今日は、そのIDセレクタとスタイルシートセレクタの記載順序と方法についてのお話しです。
２．今回の設定と目指したもの
今回、既存のテンプレートを使って、それをスタイルシートで装飾しました。テンプレートの仕様上、セレクタの設定が自由に行えなかったため、firebugでセレクタ確認して設定しました。
<body class="A"> <div id="D">...</div> </body>
上のようなソースがあって、最初はＤのセレクタだけに特定の修飾をしていたのですが、別のページで
<body class="A B"> <div id="D">...</div> </body>
とソースが表示されていたので、このページは、Ｄセレクタに別の修飾をしようと考えたのです（タイトルの背景色）。
で、セレクタによって振り分けるには、ボディのクラスセレクタを使うしかないので、最初に書いたスタイルシートの下段に書き始めたのが事の発端です。
２．結果
色々試したのですが、それはさておき、結果だけを書いておきます。
まず、最初のＤセレクタに設定したのが次のスタイルとします。
#D {background: #FFFFFF;}
この状態で、ボディがＢセレクタであるＤセレクタに別の修飾をするには、
body.B #D{background: #CCCCCC;}
#D {background: #FFFFFF;}
となりました。これが逆だと上手く動作しませんでした。
３．結果から得た教訓
全く我流でやってみて思ったことです。
・スタイルシートにはきっと順序がある。複数のセレクタを使う場合、より細かく設定したい部分から順番に書いていく必要がある。
・普通、IDセレクタの中のクラスセレクタって言う順序で定義していくけれど、逆もできるようだ（実際できている）。
・その場合、クラスとクラスの間は半角開けるんだ（当たり前ですが）。
４．まとめ
クラス設定は自分でやっていると簡単なんですが、テンプレートを使うとかなりややこしいですね。この法則性がどんな場合にでも正しいのか、これからも検証していきますが、いい勉強になりました。背景変えるだけで１時間。CSSは奥が深いです。