CSSセレクタfor No-Children-But-Not-Empty

Question

以下のHTMLフラグメントでBONKERSを選択します。その区別は、<code>ブロック内に単独であるのに対し、すべての兄弟には<a>のブロックが含まれています。 :emptyは当然の選択ですが、テキストノードのために動作しません。私はこのことを知っていると思っていたが、これは私をよく動かしている。

<ul class="Reference"> 
    <li class="level4"> 
     <code class="active-voice"> 
      <a href="some/url/x" version="2"> 
       mauve 
      </a> 
    </code> 
    <li class="level8"> 
     <code class="active-voice"> 
      BONKERS 
     </code> 
    </li> 
    <li class="level9 subclass"> 
     <code class="active-voice"> 
      <a href="some/url/c" version="2"> 
       cerise 
      </a> 
    </code> 
    </li> 
</ul> 

私は純粋なCSSのソリューションを（JSがオプションではありません）必要があり、ソースHTMLを制御することはできません。

Feh！

Answer 1

この方法に従うことができます。スタイル好きなCSSによってcode要素、その後のスタイルは、IE anchorの中で継承されているこれらのCSSスタイルをリセット：

デモ：http://jsfiddle.net/GCu2D/1062/

CSS：

code { 
    color: green; 
    font-weight: bold; 
} 
code a{ 
    color: red;/*Reset any inheritable css*/ 
    font-weight: normal; /*Reset any inheritable css*/ 
} 

あなたがないかもしれないがすべてのスタイルが要素からanchorによって継承されるわけではないため、すべてのスタイルをリセットする必要があります。

これはあなたが本当に考慮できる1つの解決策です。

Answer 2

適用するCSSプロパティに応じて、これを行うこともできないこともあります。たとえばcolorのようなものを適用する場合は、すべてcode要素に設定し、aにすべてのテキストが含まれていて、codeの範囲外にこぼれることがないと仮定すると、code aにリセットするだけです。しかし、これは一握りのプロパティでしか機能しません（ほとんどフォントのものです）。

それ以外の場合は、codeの要素を選択して、aの子を選択しようとすると、ここで純粋なCSSがあまり使われません。 jQueryはcode:not(:has(> a))です（または子要素のない任意のE要素の場合はE:not(:has(> *))）が、that's not coming to CSS anytime soonですが、セレクタ4では「子要素のない要素」には何も追加されていません。

"Feh！"は正しい。