あるソーシャルネットのユーザー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だけを消したいのですが、このような場合はどの様な指定にすればよいのでしょうか?
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
特定の子要素(または孫要素)を持つ親要素(または子要素)にスタイルを適用したい、ということですが、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
- 回答日時:
DOMを正確に記述してください。
HTMLのみならず、javascriptにしろスタイルシートにしろDOM(Document Object Module)を基準に要素を特定していきます。製作する立場でしたら開発ツールの豊富なfirefoxをお使いだと思いますが、DOMインスペクターを利用するとわかります。
body
└ div #header
└ h1
とか・・・
回答ありがとうございます。
ちょっと仰る意味が解りません。HTMLの例をもっと詳しく書けということでしょうか?
あまり詳細に書いても文字数の問題もありますし、質問の意図が通じれば良いレベルに抑えました。それでは回答できないと仰るのであればスルーでお願いします。
No.1
- 回答日時:
勝つて調べたことがあるのですが、CSSでは子から親に対する指定は出来ないとのことでした。
ホームとプロフィールでスタイルシートを変える方法しか思いつかないですねぇ。
この回答への補足
回答ありがとうございます
CSSの解説やリファレンスのサイトなどを調べていましたが、方法が見つからなかったので駄目なのかなと思いつつも、見落としている方法があるかと思い質問してみました。
やはり駄目なようで残念です。
回答ありがとうございます
CSSの解説やリファレンスのサイトなどを調べていましたが、方法が見つからなかったので駄目なのかなと思いつつも、見落としている方法があるかと思い質問してみました。
やはり駄目なようで残念です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- PHP 掲示板を作成しておりアップロードファイルとメッセージを並べたいので、アドバイスお願い致します 2 2023/07/17 21:01
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
複数のボタンを等間隔に、かつ...
-
<div id="container">の使いか...
-
html の divとtable の役割
-
HTML属性での「""」 「''」違い
-
オシャレな区切り線はありませ...
-
DD,DT,DDを横並び。paddingとma...
-
footerのclear:bothが効きません
-
div要素が重なってします
-
背景画像に全体または部分的に...
-
h1を親要素の縦中央、画像の横...
-
HTMLのJIS規格について
-
divとpの使いわけ
-
インラインフレームのページ内...
-
HTML5の終端タグ「 />」について
-
可変長要素を中は左寄せのまま...
-
h1に自分自身へのリンクを張...
-
[CSS]リキッドレイアウト上で、...
-
ローカルとWeb上で見え方が違う...
-
min-heightとheightの違いについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
HTML属性での「""」 「''」違い
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
divとpの使いわけ
-
min-heightとheightの違いについて
-
HTML5 iframe の代わり
-
divの中に外部のHTMLを埋め込む
-
3カラムレイアウトで「常に残り...
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
-
reuterのScraypingで不思議な現...
-
htmlの見出しタグ(<h1>)の次...
-
1サイト内にHTML5とXHTMLが混在...
-
inline-blockをネストすると表...
-
html5でheaderの中にnav
-
<!-- #BeginLibraryItemとは
おすすめ情報