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
Before starting the topic, here is the sample code, that is being used to explain how to build locators to identify elements.
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.
This is the 1st paragraph
This is the 2nd paragraph
This is the 3rd paragraph
This is the 4th paragraph
- List Item 1
- List Item 2
- List Item 3
- List Item 4
First child paragraph
Second child paragraph
- List Items 5
- List Items 6
- List Items 7
- 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.
- 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)
- 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.
- 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)
- 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
- 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
- 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 #1 : div.test ul:nth-of-type(3)>li:last-child
In this post we learned how to select elements with CSS pseudo classes and difference between nth-child() and nth-of-type().