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

[Der Martin]

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

[Gunnar Bittersmann]

@@Der Martin

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?

Ich vermute, gar nicht.

(Bei CSS sollte man vorsichtig sein. Oftmals ist „geht mit CSS nicht“ in Wirklichkeit „ich kenne mich mit CSS nicht genügend aus um zu wissen, wie es doch geht“.)

Wenn die Textknoten in Elementen stecken würden, ließe sich sicher was mit CSS machen. Aber so fällt mir nichts ein.

Aber anstatt die Textknoten mit JavaScript in spans zu packen, kann man dann auch gleich die Erkennung mit JavaScript machen.

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 glaub nicht, dass du das möchtest. Vielmehr denke ich, du willst Emoji größer anzeigen, wenn der Beitrag ausschließlich aus Emoji und Whitespace besteht.

🖖 Живіть довго і процвітайте

[Der Martin]

Hallo Gunnar,

(Bei CSS sollte man vorsichtig sein. Oftmals ist „geht mit CSS nicht“ in Wirklichkeit „ich kenne mich mit CSS nicht genügend aus um zu wissen, wie es doch geht“.)

das gilt aber für viele andere Bereiche auch. 😀

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 glaub nicht, dass du das möchtest. Vielmehr denke ich, du willst Emoji größer anzeigen, wenn der Beitrag ausschließlich aus Emoji und Whitespace besteht.

Whitespace habe ich jetzt noch gar nicht auf dem Schirm gehabt. Hab noch nicht ausprobiert, ob das einen Unterschied macht. Doch, gerade eben: Nein, sobald der Beitrag Whitespace enthält, sind auch die Emojis in Teams auf Schriftgröße verkleinert.

Okay, ich hatte schon unterschwellig erwartet, dass ich da wohl mit JS ran muss. Es genügt ja auch schon, dem Containerelement eine zusätzliche Klasse zu geben (oder zu nehmen), sobald es Textknoten als Kinder hat.

Einen schönen Tag noch
 Martin

[Rolf B]

Hallo Martin,

Okay, ich hatte schon unterschwellig erwartet, dass ich da wohl mit JS ran muss.

Alles andere hätte mich auch gewundert, denn CSS selektiert Elemente, keine Nodes. Und CSS-Eigenschaften formatieren Elemente, und keine Nodes.

Eine Formatierungssprache auf Node-Ebene mag existieren, aber es ist nicht CSS.

Wie werden die Emojis erzeugt? Sind das Elemente mit einem img darin oder einem background-image? Oder sind das Unicode-Emojis?

Warum frag ich? Wenn es Unicode-Emojis sind, stellen sie Text dar und der Textblock ist nicht leer. Aber sind es Bilder oder Hintergrundbilder, könnte die Pseudoklasse :empty deine Freundin werden.

Rolf

[Der Martin]

Hallo Rolf,

Okay, ich hatte schon unterschwellig erwartet, dass ich da wohl mit JS ran muss.

Alles andere hätte mich auch gewundert, denn CSS selektiert Elemente, keine Nodes. Und CSS-Eigenschaften formatieren Elemente, und keine Nodes.

ja, das leuchtet ein.

Wie werden die Emojis erzeugt? Sind das Elemente mit einem img darin oder einem background-image? Oder sind das Unicode-Emojis?

Sagen wir's so: Teams liefert die Emojis als PNG-Grafiken, sogar als APNG. Die gesamte Palette der Teams-Emojis ist inzwischen über github als Download verfügbar (allerdings ohne Animation). Die würde ich dann auch einfach verwenden.

Warum frag ich? Wenn es Unicode-Emojis sind

Sind sie nicht (außer in der Teams-App auf Mobilgeräten - daran kann ich unterscheiden, ob ein Kollege mir vom PC oder vom Handy aus schreibt). Und die möchte ich auch nicht als Fallback verwenden, weil sie je nach verfügbaren Fonts so sch... schäbig aussehen, dass ich lieber Grafiken verwende.

Aber sind es Bilder oder Hintergrundbilder, könnte die Pseudoklasse :empty deine Freundin werden.

Whoah, darüber muss ich mal nachdenken. Danke für den Anstoß, vielleicht bringt mich das weiter.

Wobei ... nee, wenn das Containerelement img-Elemente enhält, ist es doch nicht mehr :empty.

Einen schönen Tag noch
 Martin

[Rolf B]

Hallo Der Martin,

Wobei ... nee, wenn das Containerelement img-Elemente enhält, ist es doch nicht mehr :empty.

Ja. Mist. Hast natürlich recht. Ich hatte irgendwie im Kopf, dass :empty anzeigt, dass kein Text da ist.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Ja. Mist. Hast natürlich recht. Ich hatte irgendwie im Kopf, dass :empty anzeigt, dass kein Text da ist.

:empty zeigt an, dass kein Inhalt da ist.

Übrigens ist Whitespace auch Inhalt,

<div>
</div>

ist nicht leer. ☞ Die Leere^[1]

🖖 Живіть довго і процвітайте

---

1. 7.15 The Void ↩︎

[Gunnar Bittersmann]

@@Gunnar Bittersmann

:empty zeigt an, dass kein Inhalt da ist.

Übrigens ist Whitespace auch Inhalt,

<div>
</div>

ist nicht leer. ☞ Die Leere

Noch ist das in Browsern so. Aber nicht mehr lange. Das ändert sich demnächst, siehe Level 4 der Selectors-Spec.

Nachtrag: In der Liste der Sprachfehler von CSS ist dieser Punkt schon gestrichen.

🖖 Живіть довго і процвітайте