How select an attribute inside list using css selector and Selenium

Question

I'm trying to use css selector to get an element inside a <li> with Selenium

That's I have:

<div id= "popup"> <ul> <li> <div id="item" option= "1" ....> </div> </li> <li> <div id="item" option= "2" ....> </div> </li> </ul> </div> 

I need to get the second div, with option=2. I tried:

webdriver.findElement(By.cssSelector("#popup > ul li:nth-child(n) [option=2]"); 

that works fine in console of Chrome but not with Selenium :/ What's wrong with this?

Answer 1

Two issues:

• :nth-child(n) means "any value of n" which will result in every child being matched. You probably mean to use :nth-child(2) if you want to make sure you only get the element under the second li. Or if it doesn't matter which li it appears in, you can get rid of the :nth-child() selector entirely.

• The value in an attribute selector must be quoted if it begins with a digit, so [option='2'].

The correct selector, therefore, is:

webdriver.findElement(By.cssSelector("#popup > ul li:nth-child(2) [option='2']"); 

Answer 2

Using:

"#popup > ul li [option='2']" 

works fine in console and selenium!