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

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/

Using CSS you can't detect the content of the anchor tag.

[value=] would refer to an attribute on the tag

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

Not very useful since the value attribute isn't valid HTML on an a tag

If possible, slap a class on that a tag. As that is most likely not possible (because you would've already done that) you can use jQuery to add a class on that tag. Try something like this:

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

And then use .anchortwo as your class selector.

you can use the css nth-child property to access any element and do any changes. i Used it on a website i made to make a logo smaller or bigger based on the width of screen.

Using pup, a command line tool for processing HTML using CSS selectors, you can use a:contains("innerHTML1").

For example:

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