Cómo CSS: seleccionar elemento basado en HTML interno [duplicar]

Usando CSS no se puede detectar el contenido de la etiqueta de anclaje.

[value=] se referiría a un atributo en la etiqueta

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

No es muy útil ya que el atributo value no es HTML válido en una etiqueta a

Si es posible, coloca una clase en esa etiqueta a. Como lo más probable es que no sea posible (porque ya lo habrías hecho), puedes usar jQuery para agregar una clase en esa etiqueta. Prueba algo como esto:

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

Y luego use .anchortwo como su selector de clase.

Actualmente no es posible para todos los navegadores con css, pero con javascript puede hacer esto

Actualizado con código de trabajo. JSFiddle enlace a continuación:

HTML inicial por @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 para el estilo:

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

.gotcha{
  color: red;
}

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

Puede usar la propiedad css nth-child para acceder a cualquier elemento y hacer cualquier cambio. lo utilicé en un sitio web que hice para hacer un logotipo más pequeño o más grande basado en el ancho de la pantalla.

Utilizando pup, una herramienta de línea de comandos para procesar HTML usando selectores CSS, puede usar a:contains("innerHTML1").

Por ejemplo:

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

<style>
a[data-content]::before {
  content: attr(data-content);
}
a[data-content="innerHTML2"] {
  color: green;
}
</style>
<a href="example1.com" data-content="innerHTML1">&nbsp;</a>
<a href="example2.com" data-content="innerHTML2">&nbsp;</a>
<a href="example3.com" data-content="innerHTML3">&nbsp;</a>

Esto es bastante simple con un selector n-ésimo hijo.

<style>
a:nth-child(2) {
  color: green;
}
</style>
<a href="example1.com"> innerHTML1 </a>
<a href="example2.com"> innerHTML2 </a>
<a href="example3.com"> innerHTML3 </a>

Editar: Aquí está la fuente en la que encontré esto. Compruebe aquí la compatibilidad del navegador. Fuente: http://reference.sitepoint.com/css/pseudoclass-nthchild