How to CSS: select element based on inner HTML [duplicate]

Question

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

I want to style the second only (innerHTML2) using CSS selectors, based on the inner HTML. Is this possible? I've tried using a[value=innerHTML2] but it doesn't seem to work.

Answer 1

This is not possible using CSS. You can, however, do it using jQuery. There's a nice blog post on it you can read.

Answer 2

It's currently not possible for all browsers with css, but with javascript you can do this

Updated w/ working code. JSFiddle link below:

Initial HTML per @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 for styling:

/* make this look a bit more visible */ a{   display: block; }  .gotcha{   color: red; } 

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