85. Using # to select an element with a specified id

In CSS Selector, we can use # to locate the elements by id.

Examples:

p#para1  -> Locates the paragraph element which has the id value as 'para1'
#para1 -> Locates all the elements which has the id value as 'para1'

Lets Implement This:

Locate the paragraph  text element on the http://compendiumdev.co.uk/selenium/basic_web_page.html by following the below steps:

1. Open http://compendiumdev.co.uk/selenium/basic_web_page.html in Firefox Browser
2. Right click on the page and select 'View Page Source' option as shown below:

3. View the page source and identify the id attribute value of the paragraph text element that we want to locate using CSS path as shown below:

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

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

Now lets locate the element which contains the id value specified as 'para1' using CSS path 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 #para1 into the text box as shown below and click on 'Eval' button: (i.e. p#para1 will locate the paragraph element with the 
specified id value 'para1' where as #para1 will locate any element with the specified id value 'para1' )

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

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

Please comment below to feedback or ask questions.

Using [attribute='value'] to select an element containing the specified attribute will be explained in the next post.