Wie wählt man ein Element, das keine führenden oder nachlaufenden Textknoten hat?

Question

Ich experimentierte die :only-child Pseudo-Klasse mit der Verwendung aber leider scheint nicht die Textknoten zu berücksichtigen:

<style type="text/css"> 
    div span:only-child { 
    color: red; 
    } 
</style> 

<div> 
    Test 
    <span>This still becomes red :(</span> 
</div> 

<div> 
    <span>This becomes red, as it should!</span> 
</div> 
<div> 
    <span>This does not become red - great!</span> 
    <span>This does not become red - great!</span> 
</div> 

Ich versuche, einen Weg zu finden, zu erkennen, wenn ein bestimmtes Element ganz allein in seinem Containerelement ist in einer Situation, in der ich keine neuen Klassen einführen kann.

Gibt es eine Möglichkeit, dies mit CSS zu erreichen?

Answer 1

Gibt es eine Möglichkeit, dies mit CSS zu erreichen?

Leider nicht.

Eingeschlossen in einem old revision der CSS-Arbeitsgruppe „Fehler“ Liste fehlt die Idee, dass ..

Kein nackter Text mit Elementen mischt. Der gesamte rohe Text sollte ein adressierbares, umschmeichelbares Element enthalten, das es umhüllt, das bei Bedarf von CSS erstellt wird.

Current list

Textknoten sind nicht Element und CSS nicht auswählen kann (oder ignoriert) Elemente, die nicht existieren.

So ist es wahrscheinlich die beste Vorgehensweise, immer ein Textelement zu verwenden, wenn Sie Text in eine Seite integrieren ... Sie wissen nie, wann Sie es stylen müssen.

Answer 2

div:nth-child(2) span { 
color: red; 
} 

https://jsfiddle.net/cmckay/8663aLcg/