スタイルシートの小ネタ〜idとclassの合わせ技で指定する〜

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

スタイルシートを適用するのにidやclassを使いますよね。今回はその使い方の中から、たまに役立つ小ネタを紹介します。スタイルシートでidやclassを指定するとき、

#hogehoge

や

.hogehoge

という書き方をするのはご存知の通りで、

#hogehoge .hoge

という書き方（子孫セレクタ）も普段からよく使います。

さらに実際サイトを作っているとidとclassが同じdivに指定されることもよくあります。

…

こんなカンジ。

ここまではよく見るコードなんですが、さらにAjaxが絡んでくるとややこしくなってきます。

例えば

・タブメニューの背景をそれぞれidで指定している

・タブを切り替えたらリロードなしでメニューの背景もいれかわる

よくある動きです。

こんなときは#hogehogeでかつ.hoge_onの時、または.hoge_offの時という指定をします。

#hogehoge.hoge_on { background-color: #ff0000; }

#hogehoge.hoge_off { background-color: #0000ff; }

子孫セレクタに良く似てますが、idとclassの間にスペースはありません。

この書き方だと

この時は背景が赤

この時は背景が青

とclassが切り替わるだけで背景を出し分ける事ができます。

実際このくらいは子孫セレクタを使えば何とかなることが多いんですが、

Ajaxのライブラリを使ったり、プログラムでアレコレしていると

子孫セレクタだけではなんともならないことがあるので、

そんなときにはこの書き方（ちょっと調べたんですが呼び名が特に見つかりませんでした…）で対処できます。