web-dev-qa-db-fra.com

Comment faire CSS: sélectionner un élément basé sur le HTML interne

<a href="example1.com"> innerHTML1 </a>
<a href="example2.com"> innerHTML2 </a>
<a href="example3.com"> innerHTML3 </a>

Je souhaite styler le second uniquement (innerHTML2) à l'aide de sélecteurs CSS, basés sur le code HTML interne. Est-ce possible? J'ai essayé d'utiliser a[value=innerHTML2] mais cela ne semble pas fonctionner. 

htmlcsscss-selectors
32
whamsicore

Ce n'est pas possible en utilisant CSS. Vous pouvez cependant le faire en utilisant jQuery. Vous pouvez lire un article de Nice blog à ce sujet.

30
Marc W

En utilisant CSS, vous ne pouvez pas détecter le contenu de la balise d'ancrage.

[value=] ferait référence à un attribut sur la balise

<a href="" value="blah"> innerHTML2 </a>

Pas très utile car l'attribut value n'est pas un code HTML valide sur une balise a

Si possible, frappez une classe sur cette balise a. Comme ce n'est probablement pas possible (car vous l'auriez déjà fait), vous pouvez utiliser jQuery pour ajouter une classe à cette balise. Essayez quelque chose comme ça:

   <script type="text/javascript">
        $(function(){ $('a:contains(innerHTML2)').addClass('anchortwo'); });
    </script>

Et utilisez ensuite .anchortwo comme sélecteur de classe.

11
Jason

Ce n'est actuellement pas possible pour tous les navigateurs avec css, mais avec javascript, vous pouvez le faire

Mise à jour avec le code de travail. Lien JSFiddle ci-dessous:

HTML initial par @whamsicore:

<a href="example1.com"> innerHTML1 </a>
<a href="example2.com"> innerHTML2 </a>
<a href="example3.com"> innerHTML3 </a>

JavaScript:

var myEles = document.getElementsByTagName('a');
for(var i=0; i<myEles.length; i++){
    if(myEles[i].innerHTML == ' innerHTML2 '){
         console.log('gotcha'); 

         //use javascript to style
         myEles[i].setAttribute('class', "gotcha");
    }
}

CSS pour le style:

/* make this look a bit more visible */
a{
  display: block;
}

.gotcha{
  color: red;
}

https://jsfiddle.net/kjy112/81qqxj23/

11
KJYe.Name

Avec pup , un outil de ligne de commande permettant de traiter le code HTML à l'aide de sélecteurs CSS, vous pouvez utiliser a:contains("innerHTML1").

Par exemple:

$ echo '<a href="example1.com"> innerHTML1 </a>' | pup 'a:contains("innerHTML1")' text{}
 innerHTML1
0
kenorb

vous pouvez utiliser la propriété css nth-child pour accéder à n’importe quel élément et y apporter des modifications. Je l'ai utilisé sur un site Web que j'ai conçu pour créer un logo plus petit ou plus grand en fonction de la largeur de l'écran.

0
Abhansh Giri