Selettore CSS per No-Children-Ma-Not-Empty

Question

Desidero selezionare BONKERS nel frammento HTML di seguito. La sua distinzione è che è solo in un blocco <code> mentre tutti i suoi fratelli contengono <a>. :empty è la scelta più ovvia, ma non funzionerà a causa del nodo di testo. Pensavo di conoscere questa roba ma questo mi sta guidando, beh, matto.

<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> 

ho bisogno di una soluzione CSS puro (JS non è un'opzione), e non hanno alcun controllo sulla sorgente HTML.

Feh!

Answer 1

È possibile seguire questo approccio. Lo stile code elementi di qualunque CSS che vuoi e poi ripristinare quegli stili CSS che sono ereditabili in anchor s' stili cioè:

Demo: 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*/ 
} 

Non potrebbe è necessario ripristinare tutti gli stili perché non tutti gli stili sono ereditati da anchor dall'elemento code

Questa è una soluzione che puoi davvero prendere in considerazione.

Answer 2

A seconda delle proprietà CSS che si intende applicare, è possibile o meno essere in grado di farlo. Ad esempio, se applichi qualcosa come color, puoi semplicemente impostarlo su tutti gli elementi code e reimpostarlo in code a, supponendo che tutto il testo sia contenuto all'interno di tale a e che non venga versato al di fuori di esso all'interno dello code. Ciò funzionerà solo per una manciata di proprietà, tuttavia (principalmente quelle dei font).

In caso contrario, non c'è molto in termini di puro CSS qui, se si sta tentando di selezionare gli elementi code che non contengono a bambini. jQuery ha code:not(:has(> a)) (o, per qualsiasi elemento arbitrario E senza elementi figlio, E:not(:has(> *))), ma that's not coming to CSS anytime soon e Selectors 4 non fornisce nient'altro per "un elemento senza elementi figlio".

"Feh!" è giusto.