web-dev-qa-db-fra.com

Règle CSS basée sur le contenu

Je voudrais appliquer un style différent à toutes les ancres contenant un mot spécifique. Peut-on le faire en CSS pur? C'est ok si c'est CSS3 seulement.

csscss3
34
Tamás Szelei

Non. :contains a déjà été proposé mais ne figure pas dans la version de travail actuelle des sélecteurs CSS3.

Vous auriez besoin de JavaScript, par exemple:

for (var i= document.links.length; i-->0;)
    if (/\bSpecificWord\b/i.test(document.links[i].innerHTML)
        document.links[i].style.color= 'red';
33
bobince

Vous pouvez faire correspondre les valeurs d'attribut . Si vous utilisez des attributs de données personnalisés, ils peuvent obtenir ce que vous voulez.

17
Divya Manian

oui il y a un :contains sélecteur en CSS3.

li:contains("special"){text-style: italic;}

il est mentionné environ 1/2 en bas de cette page ici

C'est quelque chose que vous pouvez également faire avec jQuery aussi ...

6
Scott Evernden

@bobince aidez-moi et j'ai écrit ce code:

var x = document.getElementsByTagName('TD');
for (var i= x.length; i-->0;)
    if (x[i].innerHTML=='closed')
        x[i].parentNode.style.background= '#FEE';

Si le contenu de certains TD est 'fermé' alors la couleur de fond du TR sera identifiée avec une couleur rouge clair.

0
lynx_74

Utilisez le Hitch qui est une petite bibliothèque JS. Vous pouvez facilement appliquer un style basé sur le contenu à n'importe quel élément. Il a beaucoup d'options et idéal pour un style conditionnel.

0
Enes