87. Using dot in CSS path to select an element with a specified class

In CSS path, we can use . (i.e. dot) to locate the elements by using the class attributes value.

Examples:

p.main  -> Locates the paragraph element which has the class attribute value as 'main'
.main  -> Locates the element which has the class attribute value as 'main'
p.sub ->  Locates the paragraph element which has the class attribute value as 'sub'
.sub -> Locates all the elements which has the class attribute value as 'sub'

Lets Implement This:

Locate the paragraph  text element on the http://compendiumdev.co.uk/selenium/basic_web_page.html containing the class attribute value as 'main' by following the below steps:

1. Open http://compendiumdev.co.uk/selenium/basic_web_page.html in Firefox Browser
2. View the page source to identify the elements having the class attribute values as main and sub as shown below:

3. Click on the 'Firepath' tab, select the CSS option, enter the CSS path p.main into the text box as shown below and click on 'Eval' button:

4. Observe that the paragraph text element containing the specified class value is highlighted on the page as shown below:

Now lets locate the element on the http://compendiumdev.co.uk/selenium/basic_web_page.html containing the class attribute value as 'main' by following the below steps:

1. Open http://compendiumdev.co.uk/selenium/basic_web_page.html in Firefox Browser
2. Click on the 'Firepath' tab, select the CSS option, enter the CSS path .main into the text box as shown below and click on 'Eval' button:

3. Observe that the element containing the specified class value is highlighted on the page as shown below:

Now lets locate the paragraph text element on the http://compendiumdev.co.uk/selenium/basic_web_page.html containing the class attribute value as 'sub' by following the below steps:

1. Open http://compendiumdev.co.uk/selenium/basic_web_page.html in Firefox Browser

2. Click on the 'Firepath' tab, select the CSS option, enter the CSS path p.sub into the text box as shown below and click on 'Eval' button:

3. Observe that the paragraph text element containing the specified class value 'sub'  is highlighted on the page as shown below:

Now lets locate the element on the http://compendiumdev.co.uk/selenium/basic_web_page.html containing the class attribute value as 'sub' by following the below steps:

1. Open http://compendiumdev.co.uk/selenium/basic_web_page.html in Firefox Browser
2. Click on the 'Firepath' tab, select the CSS option, enter the CSS path .sub into the text box as shown below and click on 'Eval' button:

3. Observe that the element containing the specified class value 'sub'  is highlighted on the page as shown below:

So using . shortcut notation in CSS path, we can locate the elements by specifying the class value of the elements.

Please comment below to feedback or ask questions.

Using [attribute] to select all the element containing the specified attribute will be explained in the next post.