Customized CSS

Now that we have seen the customized XPath, it's time to look at customized CSS. Remember, CSS can be used only for forward traversal.

The following are some customized CSS examples that one can use while coding the program:

• Using the name attribute: input[name='username']. This CSS identifies the username. Notice there are no '//'s.
• Using the name and type attribute: input[type='password'][name='password']. This will identify the password textbox.
• Using the ID and class: form[id='loginForm'],form[id='loginForm'][class='navbar-form']. These two CSS selectors will identify the login form.
• Using the 'contains' clause: form[id*='Form']. This will identify the form since the ID of the form contains the text Form. Contains is indicated by '*' in CSS.
• Using the 'starts-with' clause: form[id^='login']. This will identify the form since the form ID starts with the text 'login'. starts-with is indicated by '^' in CSS.
• Using the 'ends-with' clause: form[id$='Form']. This will identify the form since the form ID ends with the text 'Form'. ends-with is indicated by '$' in CSS.