【CSS】☆を子に持つ親の指定

質問

CSSである特定のセレクタを持った子の親のスタイルを指定したいのですが、どうしたらよいのでしょうか。
調べたのですが、それらしい答えが見つかりませんでした。

たとえば

<article> <!-- 子にimgを含んだarticleにはスタイルAを指定 -->
<p>文章</p>
<img src="img/xxx.jpg" alt="" />
</article>

<article>　　　　　　　　<!-- 子にimgを含まないarticleにはスタイルBを指定 -->
<p>文章</p>
</article>

よろしくお願いします。

回答No.1

think49 · ベストアンサー

いわゆる親セレクタは比較的多い要望ですが、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

ORUKA1951

それは現状ではできません。
この場合、親要素にclass名をつけるしかありません。
なお、HTMLが間違っています。
★articleは、内容にheader,section,footer要素をとる、あるいはとると期待された完結した記事を示します。
★<img>は行内要素ですから<p><img></p>と囲みます。

　⇒HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )
　リンク先に仕様書本体があります。サンプルもそこに・・

<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では、セマンティックな書き方が強く強く求められます。そのために新しい要素が追加されたのです。正しく使いましょう。