Convert this type of XPath to CSS selector?

[David]

I'm guessing such a translation does not exist, but wanted to confirm
with others. It's too bad if not exist as having to use XPath can
sometimes be slow than CSS.

convert XPath like this, which matches a specific element by order /
number, like get me the first 1, the 5th one, nth one.

xpath=(//SomeComplex/XpathQuery/ThatMatches/MultipleElements)[1]

to CSS equivalent

[Tarun Bhadauria]

Not sure if I understood your question but you may like to see css selector -

nth-child

nth-of-type

[David]

Yea, I know of those options for CSS selector, problem is this:

for XPath, you specify //someXpath/currentNode[N]

where N is position of node for nodes under someXpath or of nodes of
type currentNode

you can do same thing in CSS with the options you mentioned.

But there is XPath feature to say match any XPath element/node that
matches this pattern, combined with a node position selector, it
becomes match against all elements that match that pattern but return
only node n, specified as:

(//someXpath/moreXpath)[n]

without parenthesis, it will match against moreXpath at position n,
which happens to be under someXpath. With parenthesis, assuming the
parenthesized XPath returns n+ matches (say 2+), it will return the
one at position n.

I don't think there's an equivalent of this parenthesis + position
selector in CSS. But if there is I sure want to know what the syntax
is. This to me is the best feature of XPath that is missing an
equivalent in CSS (along with matching nodes of ancestors and previous
siblings, etc.).

[Benjamin Hawkes-Lewis]

On Wed, Jan 25, 2012 at 5:57 AM, David <mang...@gmail.com> wrote:
> I don't think there's an equivalent of this parenthesis + position
> selector in CSS. But if there is I sure want to know what the syntax
> is. This to me is the best feature of XPath that is missing an
> equivalent in CSS (along with matching nodes of ancestors and previous
> siblings, etc.).

A :nth-match pseudo-selector has been proposed for CSS Selectors Level 4:

http://dev.w3.org/csswg/selectors4/#nth-match

There are no browser implementations yet AFAIK.

While WebDriver implementations do inject Sizzle in certain cases,
they prefer native CSS implementations so Sizzle specific features
like :eq should be avoided.

I suppose the official WebDriver way to do this with CSS would be
something like this (untested) code sample:

WebElement nthMatch = null;
Integer n = 5; // CSS is 1-indexed
String cssSelector = "div.something > a";
List<WebElement> matches =
driver.findElements(By.ByCssSelector(cssSelector));

if (n <= matches.size() {
nthMatch = matches.get(n - 1); // Java Lists are 0-indexed
}

You could make this nicer to use by wrapping it up in a
ByCssSelectorNthMatch class that subclasses By:

http://selenium.googlecode.com/svn/trunk/docs/api/java/org/openqa/selenium/By.html

--
Benjamin Hawkes-Lewis

[Daniel Wagner-Hall]

http://cssify.appspot.com/

[jbocce]

I believe you can use nth-child().

So for your example above you would have...

css = SomeComplex>XpathQuery>ThatMatches>MultipleElements>*:nth-
child(1)

http://www.w3schools.com/cssref/sel_nth-child.asp

Hope this helps.