To do actions on an element in a web page, first we need to identify the element.  CSS pseudo class selector to identify an element on web page is discussed in this post.

CSS pseudo class supports selection based on extra information like position of an element in the list of children’s of its parent.

Below are the different types of pseudo classes

  • nth-child
  • nth-last-child
  • nth-of-type
  • nth-last-of-type
  • first-child
  • last-child
  • only-child

Before starting the topic, here is the sample code, that is being used to explain how to build locators to identify elements.

Sample code

Below  is the HTML code view in Firebug  to build locators (right side) and HTML view from the browse (left  side)

To know whether locators are working or not, use FirePath panel of firebug.  FirePath is an extension of the firebug to identify the locators in DOM.

Example #1:

samplecode1

This is the 1st paragraph

This is the 2nd paragraph

This is the 3rd paragraph

This is the 1st div
This is the 2nd div

This is the 4th paragraph

Example #2:

CSS-pseudo-class-samplecode2

  • List Item 1
    • Child
    • Child
    • Child
  • List Item 2
  • List Item 3
  • List Item 4

First paragraph

First child paragraph

Second child paragraph

  • List Items 5
  • List Items 6
  • List Items 7
nth-child()
  • Identify an element that is nth sibling based on the position among all the siblings
  • Usually positions of siblings start from #1.
  • We can simply assume which element would be selected when used :nth-child on its own.
    • For example, to select second div (5th sibling) of Example #1,  we can write div#sample :nth-child(5)
  • But when we use nth-child with combination of type or class selector, following are the considerations to identify an element from the siblings.
    • Find the sibling based on its position
    • Selected sibling type should be same as given type in locator

To select the same second div (5th sibling) of Example #1 , we may write  div#sample div:nth-child(2)

But this will not work, because we combined nth-child and type.

As per the locator, it will look for 2nd sibling that is paragraph(<p>)

And then match the type. Selected sibling type is <p> but given type as <div>, so nothing will be identified.

To overcome this we can use nth-of-type.

nth-of-type()
  • Identifies an element that is the nth sibling of it’s type.
  • Like nth-child, it finds the element in it’s siblings based on number, but here it finds siblings that are of the same element type.

For example, to select the second div of Example #1, we can write       div#sample div:nth-of-type(2)

nth-last-child()
  • Same as nth-child but counting from last sibling

For example, to select last sibling (last paragraph) of Example #1,  we can write div#sample :nth-child(1)

To select second div from the bottom of Example #1 , we can  write          div#sample div:nth-last-child(3)

Note: In this we have given position 3, because we combined nth-last-child and type. If we gave 2, then it will identify first div from the last.

nth-last-of-type()
  • Same as nth-of-type but counting from last sibling.
  • It finds the element in it’s siblings based on number from last sibling, but here it finds siblings that are of the same element type.

For example to select second div from the bottom of Example #1 , we can write   div#sample div:nth-last-of-type(2)

first-child
  • Identifies an element that is the first sibling

For example to select the first <ul> of Example #2, we can write .test>ul:first-child

last-child
  • Identifies an element that is the last sibling

For example to select the last <ul> of Example #2,  we can write   .test>ul:last-child

only-child
  • Identifies an element that is the only child of its parent.

For example to select first paragraph <p> in Example #2, we can write               .test p:only-child

Question: Try to write a locator to select “List Item 7” of Example #2.

There are different ways to solve this, below is the one of the way.

Solution #1div.test ul:nth-of-type(3)>li:last-child

 Summary: 

In this post we learned how to select elements with CSS pseudo classes and difference between nth-child() and nth-of-type().

Run jQuery in Selenium WebDriver
Selenium Grid 2.0
0