You can generate the css-selector from ul like ul > li:nth-child(1) for home. See below:

driver.findElement(By.cssSelector("ul > li:nth-child(1)")); >> home
driver.findElement(By.cssSelector("ul > li:nth-child(2)")); >> posts
driver.findElement(By.cssSelector("ul > li:nth-child(3)")); >> events

also reachin span is the same:

driver.findElement(By.cssSelector("ul > li:nth-child(1) > a > span")); >> home

CSS does not provide a selector for the nth element matching some complex selector. jQuery makes up for this with the :eq() selector:

$("#myId > li:nth-child(2) > a:eq(8)")

Note that :eq() is 0-indexed, unlike :nth-child() which is 1-indexed, so this will return the ninth element that matches the selector #myId > li:nth-child(2) > a.

The equivalent XPath, should you choose to use that instead, is:

(id('myId')/li[2]/a)[9]

Your situation is unique, however, because if we assume that #myId is unique, as it should be, then you can use the CSS pseudo-class :nth-of-type() to find the ninth a child of the second li child of the element #myId:

$("#myId > li:nth-child(2) > a:nth-of-type(9)")

Note that :nth-of-type() and :eq() are not the same. :nth-of-type() behaves much like :nth-child() in that it considers children of the same parent, except that it looks at the element type, or the tag name. In this case, the element type we're concerned with is a.

The use of > combinators in your existing selector implies a parent-child relationship between your li and a elements, which is compatible with the :nth-of-type() selector. This is why I believe it can be used in your specific situation.

Only using class names is not sufficient in your case.

• By.cssSelector(".ban") has 15 matching nodes
• By.cssSelector(".hot") has 11 matching nodes
• By.cssSelector(".ban.hot") has 5 matching nodes

Therefore you need more restrictions to narrow it down. Option 1 and 2 below are available for CSS selector, 1 might be the one that suits your needs best.

Option 1: Using list items' index (CssSelector or XPath)

Limitations

• Not stable enough if the site's structure changes

Example:

driver.FindElement(By.CssSelector("#rightbar > .menu > li:nth-of-type(3) > h5"));
driver.FindElement(By.XPath("//*[@id='rightbar']/ul/li[3]/h5"));

Option 2: Using Selenium's FindElements, then index them. (CssSelector or XPath)

Limitations

• Not stable enough if a site's structure changes
• Not the native selector's way

Example:

// Note that By.CssSelector(".ban.hot") and //*[contains(@class, 'ban hot')] are different, but doesn't matter in your case
IList<IWebElement> hotBanners = driver.FindElements(By.CssSelector(".ban.hot"));
IWebElement banUsStates = hotBanners[3];

Option 3: Using text (XPath only)

Limitations

• Not for multilanguage sites
• Only for XPath, not for Selenium's CssSelector

Example:

driver.FindElement(By.XPath("//h5[contains(@class, 'ban hot') and text() = 'us states']"));

Option 4: Index the grouped selector (XPath only)

Limitations

• Not stable enough if the site's structure changes
• Only for XPath, not CssSelector

Example:

driver.FindElement(By.XPath("(//h5[contains(@class, 'ban hot')])[3]"));

Option 5: Find the hidden list items link by href, then traverse back to h5 (XPath only)

Limitations

• Only for XPath, not CssSelector
• Low performance
• Tricky XPath

Example:

driver.FindElement(By.XPath(".//li[.//ul/li/a[contains(@href, 'geo.craigslist.org/iso/us/al')]]/h5"));