Gibt es einen CSS-Selektor für Elemente, die einen bestimmten Text enthalten?

Question

Ich bin auf der Suche nach einem CSS-Selektor für die folgende Tabelle:

Peter    | male    | 34
Susanne  | female  | 12

Gibt es einen Selektor für alle TDs, die "männlich" enthalten?

Answer 1

Wenn ich lese die Spezifikation richtig, nein.

Sie können auf ein Element, den Namen eines Attributs im Element und den Wert eines benannten Attributs in einem Element abgleichen. Ich sehe jedoch nichts für die Übereinstimmung von Inhalten innerhalb eines Elements.

Answer 2

Sieht so aus, als hätten sie es für die CSS3-Spezifikation in Betracht gezogen aber er hat es nicht in die Auswahl geschafft .

:contains() CSS3 Selektor http://www.w3.org/TR/css3-selectors/#content-selectors

Answer 3

Verwendung von jQuery:

$('td:contains("male")')

Answer 4

Sie müssen ein Datenattribut zu den Zeilen hinzufügen, das data-gender mit einer male o female Wert und verwenden Sie den Attributselektor:

HTML:

<td data-gender="male">...</td>

CSS:

td[data-gender="male"] { ... }

Answer 5

Es gibt tatsächlich eine sehr konzeptionelle Grundlage dafür, warum dies nicht umgesetzt wurde. Es ist eine Kombination von im Wesentlichen 3 Aspekten:

1. Der Textinhalt eines Elements ist praktisch ein untergeordnetes Element dieses Elements.
2. Sie können den Textinhalt nicht direkt anvisieren
3. CSS erlaubt kein Aufsteigen mit Selektoren

Diese drei Punkte zusammen bedeuten, dass Sie, sobald Sie den Textinhalt haben, nicht mehr zum enthaltenden Element zurückkehren können, und Sie können den vorhandenen Text nicht mehr gestalten. Dies ist wahrscheinlich von Bedeutung, da das Abwärtssteigen nur eine einmalige Verfolgung des Kontexts und das Parsen im SAX-Stil ermöglicht. Aufsteigende oder andere Selektoren, die andere Achsen einbeziehen, machen komplexere Traversal- oder ähnliche Lösungen erforderlich, die die Anwendung von CSS auf das DOM erheblich erschweren würden.