366. Using * wild card in CSS selector

* is used in CSS path to locate all the elements.

Example:

* -> All the elements of the web page (i.e.  from root element html to the grand child elements) will be highlighted/located.

head > * -> All the elements of the web page under the head node will get highlighted/located.

body > * -> All the elements of the web page under the body node will get highlighted/located.


Lets Implement

First lets locate all the elements of the web page 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 * into the text box as shown below and click on 'Eval' button:

3. Observe that all the elements of the web page got highlighted in the HTML code as shown below:

Now lets locate all the elements of the web page which are under the head tag 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 head >* into the text box as shown below and click on 'Eval' button:

3. Observe that all the elements of the web page under the head tag got highlighted in the HTML code as shown below:

Now lets locate all the elements of the web page which are under the body tag 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 body >* into the text box as shown below and click on 'Eval' button:

3. Observe that all the elements of the web page under the body tag got highlighted in the HTML code as shown below:

So we have used * in CSS path to locate all the elements.

Please comment below to feedback or ask questions.

Using ^= , $= and *= in CSS selector will be explained in the next post.