240 votes

Sélecteur CSS basé sur le texte de l'élément ?

Existe-t-il un moyen de sélectionner un élément en css sur la base du texte de l'élément ?

ie :

li[text=*foo]

<li>foo</li>
<li>bar</li>

Ça ne marche probablement pas.

Edit : Il suffit également de prendre en charge Chrome.

141voto

Błażej Klisz Points 429

Je sais que ce n'est pas exactement ce que vous cherchez, mais peut-être que ça vous aidera.

Vous pouvez essayer d'utiliser un sélecteur jQuery :contains() ajouter une classe et ensuite faire un style normal pour une classe.

10 votes

Cela a fonctionné pour moi. J'ai fini par utiliser quelque chose comme : $("div:contains('Text')") .closest("div.parent_div") .css("background", "#555");

35 votes

@dineshygv Non, il ne doit pas être marqué comme la réponse. La question demandait un sélecteur CSS. Cette réponse est un sélecteur jQuery qui est entièrement différent et ajoute la dépendance de l'utilisation de jQuery. Les sélecteurs CSS corrects ne nécessitent pas de bibliothèque spéciale, mais seulement le respect des normes CSS et DOM par le navigateur.

2 votes

Incroyablement, cela fonctionne dans les tests unitaires Rails assert_select '.text-muted:contains("Total Raised")', 'Total Raised' . guides.rubyonrails.org/v5.0/testing.html#testing-views Je ne m'y attendais pas, car je pensais que les tests unitaires utilisaient des sélecteurs CSS Ruby, et non JQuery.

93voto

zellio Points 8863

Pas avec CSS directement, vous pourriez définir les propriétés CSS via JavaScript en vous basant sur le contenu interne, mais au final, vous devriez toujours opérer dans les définitions de CSS.

7 votes

Essayez le sélecteur css :empty. Cela a fonctionné pour moi.

1 votes

@DmitriiMalyshev Lien vers la description de l'événement :empty sélecteur : w3schools.com/cssref/sel_empty.asp

14voto

Agos Points 3858

Cela a probablement été discuté, mais depuis CSS3, il n'y a rien qui ressemble à ce dont vous avez besoin (voir aussi " Existe-t-il un sélecteur CSS pour les éléments contenant un certain texte ? "). Vous devrez utiliser des balises supplémentaires, comme celles-ci :

<li><span class="foo">some text</span></li>
<li>some other text</li>

Ensuite, faites-y référence de la manière habituelle :

li > span.foo {...}

23 votes

Cela peut prêter à confusion. Le sélecteur décrit est basé sur la classe de l'élément, et non sur le texte qu'il contient. Oui, il est écrit "Vous devrez utiliser des balises supplémentaires", mais un simple coup d'œil suffit pour ne pas s'en apercevoir.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X