CSSである特定のセレクタを持った子の親のスタイルを指定したいのですが、どうしたらよいのでしょうか。
調べたのですが、それらしい答えが見つかりませんでした。
たとえば
<article> <!-- 子にimgを含んだarticleにはスタイルAを指定 -->
<p>文章</p>
<img src="img/xxx.jpg" alt="" />
</article>
<article> <!-- 子にimgを含まないarticleにはスタイルBを指定 -->
<p>文章</p>
</article>
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
いわゆる親セレクタは比較的多い要望ですが、CSS Level 4 でセレクタに対象を取れるようになります。
http://dev.w3.org/csswg/selectors4/#subject
http://myakura.github.com/n/selectors4.html (※日本語記事なので紹介しましたが、この文書執筆時の仕様と現仕様は若干異なります)
CSS Level 4 は策定中なので Syntax が安定していません(更新がある度にSyntaxが変化しています)が、2013/01/16版では "!" で対象を決定してますね。
/* img要素を子に持つarticle要素 (2013/01/16版の CSS Level 4 におけるセレクタ記述) */
!article > img { ... }
現状は仕様が安定していないので、article要素にclassを割り当てる代替手段が妥当かと思います。
No.2
- 回答日時:
それは現状ではできません。
この場合、親要素にclass名をつけるしかありません。
なお、HTMLが間違っています。
★articleは、内容にheader,section,footer要素をとる、あるいはとると期待された完結した記事を示します。
★<img>は行内要素ですから<p><img></p>と囲みます。
⇒HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
リンク先に仕様書本体があります。サンプルもそこに・・
<section>
<h2>見出し</h2><!-- sectionには必ずひとつだけ見出しが存在すると期待される -->
<p>段落</p>
<p>段落</p>
<figure class="fig withIMG" id="fig1"><!-- 本文から参照される記事(画像に限らない) -->
<figcaption>見出し</p>
<p class="figImage">画像</p>
<p>説明</p>
</figure>
<p>段落</p>
<figure class="fig" id="fig2"><!-- 本文から参照される記事(画像に限らない) -->
<figcaption>見出し</p>
<p>説明</p>
</figure>
・・・とかですかね。
HTML5では、セマンティックな書き方が強く強く求められます。そのために新しい要素が追加されたのです。正しく使いましょう。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript htmlとcssに関する質問です 3 2022/12/06 05:36
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS imgとpを縦・横に中央揃えする 1 2023/01/17 11:30
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
超音波で洗脳。
-
含む含まないという概念自体の...
-
inputタグはformタグで必ず囲む...
-
質問1.
-
改行ほどは行かないけど、若干...
-
角丸画像の背景色を透明にした...
-
スタイルシートで文字色を指定...
-
smallにtext-allignが効かない
-
clear:both;を単体で指定
-
テキストボックスの中にリンク...
-
「諸要素」とはどういう意味で...
-
figcaption要素の中にul要素
-
2個のFormを横並びにしたい
-
タグは大文字と小文字どちらが...
-
CSSで改行後の行間調整
-
親要素・子要素
-
CSSファイルを使用せず、HTMLの...
-
タイトルタグの中に使わないほ...
-
cssで#main dl > ddの「>」はど...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
超音波で洗脳。
-
質問1.
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
NからZへの全単射を具体的に構...
-
角丸画像の背景色を透明にした...
-
タグは大文字と小文字どちらが...
-
改行ほどは行かないけど、若干...
-
2個のFormを横並びにしたい
-
「諸要素」とはどういう意味で...
-
input type="hidden"で取得した...
-
CSS:overflow要素の印刷について
-
textareaの幅を画面と合わせたい
-
親要素・子要素
-
テキストボックスの中にリンク...
-
emとstrongの反対
-
cssのdisplay:block
-
border: noneでボタンの境界線...
-
tdに対してmin-heightの定義、...
おすすめ情報