特定のclassセレクタを持つ要素の親要素にスタイルを適用する

言ってること伝わります？（笑）

WordPressだと、function.php にごにょごにょすると、bodyタグのクラスセレクタにページスラッグを追加できたりするので、コンテンツ部分を作ってしまってからでも、各ページの特定の部分だけに要素を適用することも可能だったりします。

ところが、基本的にコンテンツ部分のソースには手を加えられない（もしくはページ数が多すぎで手を加えたくない）ようなサイトリニューアルのお仕事で、特定のコンテンツ（スタイル）を持つページだけサイドバー無しにしたいなんて場合、もうどうにもこうにも困ってしまいます。

「そんなことレアケースだろう」と思われるかもしれませんが、もともとゆるゆるのhtmlで作られたサイトを、セキュリティ度合いの高いCMSに移行するなんて仕事が、公立の学校や、公立の施設、病院などでしばしばあるのです。

このような場合、メインのコンテンツは自由にhtmlが書けますが、ガチガチなので、body タグに手を出せませんし、サイドバーはすでにCMS側で作成されてしまっているので、そのフレーム自体を消し去ることができません。、

そんな事情で、大きな表のあるページだけサイドバー無しにするとか「各々のページだけこうしたい」という要望に応えられないのです。

css3では、そのような仕様はなく、css4で出るかもと囁かれていましたが、今のところ、対応しているブラウザはありません。

で、どうするかというとjQueryさんにお願いするしかないようです。

で、どうするかというとjQueryさんにお願いするしかないようです。手を出せるメインコンテンツの部分に以下のコードを埋め込みます（jQueryを読み込めているという前提ですが…）

<script>
(function () {
$(function(){
	$("body:has(div.home)").addClass("page-home");
});
})(jQuery);
</script>

上記のソースだと、<div class=”home”>が内包されている場合、そのbodyタグに自動的にclass=”page-home”を追加します。

あとは、body.page-home に続けて各要素のスタイルを設定してあげれば良いのです。

上の例はトップページ限定なので、home としていますが、各ページで変えることもできますし、うまく変数を使うこともできるかと思います。