367. Using ^= , $= and *= in CSS selector

If we have to locate the elements based on the attribute value, then

• we can use ^= attribute selector to match the attribute values starting with the specified text.
• we can use $= attribute selector to match the attribute values ending with the specified text.
• we can use *= attribute selector to match the attribute values containing the specified text any where in the attribute values.

Lets Implement

First lets use ^= attribute selector 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^='pa']  into the text box as shown below and click on 'Eval' button:

3. Observe that all the paragraph elements having the id attribute value starting with 'pa' text got highlighted as shown below:

4. Now enter the CSS path p[class^='m']  into the text box as shown below and click on 'Eval' button:

5. Observe that all the paragraph elements having the class attribute value starting with 'm' text got highlighted as shown below:

Now lets use $= attribute selector 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$='a1']  into the text box as shown below and click on 'Eval' button:

3. Observe that the paragraph elements having the id attribute value ending with 'a1' text got highlighted as shown below:

4. Now enter the CSS path p[class$='b']  into the text box as shown below and click on 'Eval' button:

5. Observe that the paragraph elements having the class attribute value ending with 'b' text got highlighted as shown below:

Now lets use *= attribute selector 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*='ar']  into the text box as shown below and click on 'Eval' button:

3. Observe that all the paragraph elements having the id attribute value containing 'ar' text any where in the attribute  value got highlighted as shown below:

4. Now enter the CSS path p[class*='a']  into the text box as shown below and click on 'Eval' button:

5. Observe that all the paragraph elements having the class attribute value containing 'a' text any where in the attribute value got highlighted as shown below:

So we have used ^= , $= and *= attribute selectors in CSS path.

Please comment below to feedback or ask questions.

Using Boolean Operators in CSS selector will be explained in the next post.