12

I check this selector:

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

selector doesn't work?

I check this in firefinder and does return nothing (not info that there is zero elements)

Then check this:

h3:nth-child(1)

and it returns h3, so selector is almost good, but something with this(h3 has text 'a') text goes wrong.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
user278618
  • 19,306
  • 42
  • 126
  • 196

3 Answers3

22

:contains() is not was going to be a CSS3 selector (thanks T.J. Crowder for the link), but it didn't make it, most likely because the way it works tends to lead to severe performance and over-selection issues. For example, if an element E matches :contains() for a given string argument, then all of its ancestors would also match; using it with a universal selector would lead to unexpected results with certain style properties, on top of being slow for the browser.

There is no other CSS selector that serves a purpose like :contains(). So you'll have to find some other way, either by modifying your HTML or even by using jQuery's :contains(), to achieve the effect you want:

Select an h3 element
if it is the first child of its parent
and its text contains the letter 'a'.

For jQuery and Selenium RC users: :contains() is implemented in the Sizzle selector engine used by jQuery, which is also used in Selenium RC (but not Selenium WebDriver). It works as described in this decade-old revision of the CSS3 spec, but again, due to how the spec describes it, you need to use it with care or it may lead to unexpected selections.

On a final note, h3:nth-child(1) can be replaced with h3:first-child, which as a CSS2 selector has better browser support.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Indeed. It was going to be defined (there's even a section in the [CSS3 spec](http://www.w3.org/TR/2009/PR-css3-selectors-20091215/) for it, Section 6.6.6), but it wasn't. – T.J. Crowder Jan 24 '11 at 10:58
  • `This section intentionally left blank. (This section previously defined a :contains() pseudo-class.)` Does that mean that the W3C took `:contains` out of the CSS3 spec? http://www.w3.org/TR/css3-selectors/ – Russell Dias Jan 24 '11 at 10:58
2

If you're trying to use :contains(a) to find an anchor tag (rather than the letter A), you could use:

h3:nth-child(1) a

or

h3:first-child a
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Kerrick
  • 7,420
  • 8
  • 40
  • 45
  • 1
    In this case he seems to want to target the first descendant of `h3`, only if they have an `a` inside. Your selector would target the `a` instead. – kaldimar Feb 26 '19 at 20:02
1

The :contains() pseudo-class isn't in the CSS Spec and is not supported by either Firefox or Chrome.

You can find a couple of detailed discussion in:


Solution

As a solution you have to drop the contains() part and your effective locator will be:

h3:nth-child(1)

Further as @BoltClock mentioned within his answer, you can also use:

h3:first-child

As an alternative, you can also use:

h3:first-of-type

tl; dr

Moshe Slavin
  • 5,127
  • 5
  • 23
  • 38
undetected Selenium
  • 183,867
  • 41
  • 278
  • 352