¿Por qué no funciona el selector h3: nth-child (1): contains (‘a’)?

Reviso este selector:

h3:nth-child(1):contains('a') 

selector no funciona?

Compruebo esto en firefinder y no devuelve nada (no hay información de que hay cero elementos)

Luego revisa esto:

 h3:nth-child(1) 

y devuelve h3, por lo que el selector es casi bueno, pero algo con este texto (h3 tiene texto ‘a’) sale mal.

:contains() no es iba a ser un selector de CSS3 ( gracias TJ Crowder por el enlace ), pero no lo logró, muy probablemente porque la forma en que funciona tiende a generar problemas de rendimiento y de selección excesiva. Por ejemplo, si un elemento E coincide :contains() para un argumento de cadena dado, todos sus ancestros también coincidirían; usarlo con un selector universal daría lugar a resultados inesperados con ciertas propiedades de estilo, además de ser lento para el navegador.

No hay otro selector CSS que sirva para un propósito como :contains() . Así que tendrás que buscar de otra manera, ya sea modificando tu HTML o incluso usando jQuery’s :contains() , para lograr el efecto que deseas:

Seleccione un elemento h3
si es el primer hijo de su padre
y su texto contiene la letra ‘a’.

Para los usuarios de jQuery y Selenium RC :contains() se implementa en el motor de selección Sizzle utilizado por jQuery, que también se usa en Selenium RC (pero no en Selenium WebDriver). Funciona como se describe en esta revisión de hace una década de la especificación CSS3 , pero de nuevo, debido a la forma en que la especificación lo describe, debe usarlo con cuidado o puede conducir a selecciones inesperadas.

Como nota final, h3:nth-child(1) se puede reemplazar por h3:first-child , que como selector de CSS2 tiene mejor compatibilidad con el navegador.

Si está tratando de usar :contains(a) para encontrar una etiqueta de anclaje (en lugar de la letra A ), puede usar:

 h3:nth-child(1) a 

o

 h3:first-child a