101. CSS selector Optimization Strategy One - Use the id attribute if available for the element but not used

We have to use id attributes in the CSS statements if the element nodes used in the CSS statements have the id attribute available. 

Lets implement This:

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

2.  In 'Firepath' tab of 'FireBug' options, select CSS option and enter form CSS Statement and click on 'Eval' Button as shown below:

3. Ensure that the form element is high lighted on the page as shown below:

4. View the HTML Source of the identified Form element and observe that the form node has id attribute available as shown below:

5. Even though we are able to locate or high light the form element without using its id attribute value in the CSS statement, we've to optimize our CSS statement by using the id attribute to make the CSS statement least breakable. So lets enter the CSS Statement which includes the id attribute i.e. form[id='HTMLFormElements'] instead of form CSS Statement  and click on 'Eval' button as shown below:

6. Observe that the new CSS statement form[id='HTMLFormElements'] is high lighting the Form element on the page as shown below and also now our CSS statement is least breakable as we are using id attribute in it.

So we've implemented our First Strategy to optimize the CSS Statements. Lets go through the second strategy to optimize the CSS Statements in next post.

Please comment below to feedback or ask questions.

CSS selector Optimization Strategy Two - Use the combination of attributes to make the CSS selector statement more specific will be explained in the next post.