CSS セレクタ 孫要素まで見て子に適用したい

質問

あるソーシャルネットのユーザーCSSを作っています。
そこはOpenPNEで構築されているのですが、微妙に手が加えられていて所々広告が挿入されて使いにくいため、これを消そうと思っています。

HTML
div ID=Left
　div class=ad　　←広告
　div class=parts ←プロフ画像
　div class=ad　　←広告
　div class=parts ←フレンド欄と同じような枠内に広告
　div class=parts ←フレンド欄
　div class=parts ←フレンド欄と同じような枠内に広告
　div class=parts ←参加コミュニティ欄
/div
このような構造になっているのですが、コンテンツと同じクラスが設定されている広告が上手く消せません。また、ホーム画面では挿入されている広告がフレンドのプロフィールでは挿入されていないため、nth-of-type()やnth-child()では順番が変わってしまい消したくない所が消えてしまいます。（ホーム、フレンド共に親divまでの構造は同じです）

孫要素まで掘り下げれば区別が付くのですが、
div#Left>div.parts>h3[hogehoge] {display: none !important}
とすると見出ししか消えません。h3[hogehoge]までで判定し、一致したdiv.partsだけを消したいのですが、このような場合はどの様な指定にすればよいのでしょうか？

回答No.3

wmin-2014

特定の子要素（または孫要素）を持つ親要素（または子要素）にスタイルを適用したい、ということですが、CSSでは無理だったかと思います。
jQueryなら「has」を使って子（または孫）要素のあるなしを判定できますが、この方法はダメなんですか？

例：
●子要素にh3が「ない」場合にクラス「none」を追加

$(function() {
$("#親 #子:not(:has(h3))").addClass("none");
});

●子要素にh3が「ある」場合にクラス「none」を追加

$(function() {
$("#親 #子:has(h3)").addClass("none");
});

わかり辛いのでIDで表現してますが、クラスでも指定可能です。

お礼

回答ありがとうございます。
StylishのユーザーCSSを書いているので、おそらくjavascriptを利用する方法は出来ないのではないかと思います。

CSSでは出来ないとのこと。残念ですが違うやり方を考えてみます。

回答No.2

ORUKA1951

DOMを正確に記述してください。HTMLのみならず、javascriptにしろスタイルシートにしろDOM(Document Object Module)を基準に要素を特定していきます。
　製作する立場でしたら開発ツールの豊富なfirefoxをお使いだと思いますが、DOMインスペクターを利用するとわかります。
body
　└ div　　　　　　#header
　　　└ h1
とか・・・

お礼

回答ありがとうございます。
ちょっと仰る意味が解りません。HTMLの例をもっと詳しく書けということでしょうか？
あまり詳細に書いても文字数の問題もありますし、質問の意図が通じれば良いレベルに抑えました。それでは回答できないと仰るのであればスルーでお願いします。

回答No.1

ONEONE

勝つて調べたことがあるのですが、CSSでは子から親に対する指定は出来ないとのことでした。

ホームとプロフィールでスタイルシートを変える方法しか思いつかないですねぇ。

お礼

回答ありがとうございます

CSSの解説やリファレンスのサイトなどを調べていましたが、方法が見つからなかったので駄目なのかなと思いつつも、見落としている方法があるかと思い質問してみました。
やはり駄目なようで残念です。

補足

回答ありがとうございます

CSSの解説やリファレンスのサイトなどを調べていましたが、方法が見つからなかったので駄目なのかなと思いつつも、見落としている方法があるかと思い質問してみました。
やはり駄目なようで残念です。