Der Martin: CSS-Selektor für "hat keine Textknoten als Geschwister"

Beitrag lesen

Hallo miteinander,

ich fordere die Kreativität der CSS-Kenner hier heraus. Gegeben sei folgendes Markup:

<div class="foo">
 Lorem ipsum dolor sit amet
 <img class="bar" src="..." alt="...">
 denn sie wissen nicht, was sie tun
 <img class="bar" src="..." alt="...">
 und ich war's wirklich nicht
</div>

Ich möchte nun die img-Elemente mit der Klasse "bar" selektieren (es kann noch weitere img-Elemente ohne diese Klasse geben), aber nur dann, wenn sie keine Textknoten als Geschwister haben. Wie kann mir CSS dabei helfen?

Hintergrund: Ich möchte das Gimmick von MS Teams nachbilden, dass Emojis in Chatbeiträgen größer angezeigt werden, wenn der Beitrag ausschließlich aus Emojis besteht.

Ich habe schon die strukturellen Pseudoklassen durchstöbert, aber nichts Passendes gefunden.

Any ideas? Eventuell eine geniale Kombination? Oder muss ich mit JS nachhelfen?

Einen schönen Tag noch
 Martin

--
Im Englischen hat eine Katze neun Leben. Im Deutschen vielleicht auch, aber nach Abzug der Steuern bleiben nur noch sieben übrig.

akzeptierte Antworten