361. Using [attribute='value'] to select an element containing the specified attribute

In CSS Selector, we can use [attribute='value'] to locate the elements by the specified attributes.

Examples:

p[id='para1']  -> Locates the paragraph element which has the attribute id value as 'para1'
p[class='sub'] -> Locates the paragraph element which has the attribute class value as 'sub'
[id='para1'] -> Locates the element which has the attribute id value as 'para1'
[class='sub'] -> Locates the element which has the attribute class value as 'sub'

Lets Implement This:

Locate the paragraph  text element on the http://compendiumdev.co.uk/selenium/basic_web_page.html containing the id attribute value as 'para1' 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[id='para1'] into the text box as shown below and click on 'Eval' button:

3. Observe that the paragraph text element containing the specified id 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 id attribute value as 'para1' 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 [id='para1'] into the text box as shown below and click on 'Eval' button:

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

Now lets locate the  paragraph 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[class='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 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 [class='sub'] 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:

By using [attribute='value'] in CSS path, we have located the elements having the specified attributes.

Please comment below to feedback or ask questions.

Using dot in CSS path to select an element with a specified class will be explained in the next post.