When we don't have an option to choose Id or Name, we should prefer using CSS locators as the best alternative.
CSS is "Cascading Style Sheets" and it is defined to display HTML in structured and colorfull styles are applied to webpage.

• CSS has more Advantage than Xpath
• CSS is much more faster and simpler than the Xpath.
• In IE Xpath works very slow, where as Css works faster when compared to Xpath.

Syntax:

tagName[attributename=attributeValue]
Example 1: input[id=email]
Example 2: input[name=email][type=text]

In CSS there are two special characters which has important role to play.
1. Hash(#) refers to Id
Example:

css=input[id=email]

The above one can be re-written as

css=input#destination

2. dot(.) refers to class.
Syntax:

css=input.submitbtn

CSS locator Examples using ID and Class attributes

/* below syntax will find "input" tag node which contains "id=email" attribute */

css=input[id=email]

In selenium we can write it as

WebElement Email = driver.findElement(By.Css("input[id=email]"));
Email.SendKeys("hello@sampleemail.com");

You can make use of Selenium IDE to verify if the identifier is working fine or not. If the element has identified, it will highlight the field and html code in Yellow color.

Please find the below screen shot with example:

/*below syntax will find "input" tag which contains "id=email" and "type=text" attribute.*/

css=input[name=email][type=text]

Please find the below screen shot with example:

/*Below is the syntax for using input Tag and class attribute: It will find input tag which contains "submitButton" class attribute.

css=input.rc-button.rc-button-submit

If you observe the above, there are two classes defined in one class is rc-button and the other class is rc-button-submit. We can combine two class in css by using dot(.) symbol.

Please find the below screen shot with example:

Using CSS locators, we can also locate elements with sub-strings. Which are really help full when there are dynamically generated ids in webpage

There are there important special characters:
1. '^' symbol, represents the starting text in a string.
2. '$' symbol represents the ending text in a string.
3. '*' symbol represents contains text in a string.

CSS Locators for Sub-string matches(Start, end and containing text) in selenium
/*It will find input tag which contains 'id' attribute starting with 'ema' text. Email starts with 'ema' */

css=input[id^='ema']

If you remove the symbol an try to find the element with same sub-string, it will display error as "locator not found". We can observe the error in the below screen shot. one with error and the other with success

/*It will find input tag which contains 'id' attribute ending with 'ail' text. Email ends with 'mail' */

css=input[id$='mail'] 

Please find the below screen shot with example:

/* It will find input tag which contains 'id' attribute containing 'mai' text. Email contains 'mai' */

css=input[id*='mai'] 

CSS Element locator using child Selectors

/* First it will find Form tag following remaining path to locate child node.*/

css=form>label>input[id=PersistentCookie] 

Please find the below screen shot with example:

CSS Element locator using adjacent selectors
/* It will try to locate "input" tag where another "input" tag is present on page. the below example will select third input adjacent tag.

css=input + input + input