How to use CSS selector to identifying web elements in Selenium Webdriver using java

CSS selector:

When there is no an option to choose web element using selector like as ID or Name etc, Selenium Webdriver prefer to use CSS locators as the best alternative to choose web element. CSS Selector is combination of an element selector and a selector value which identifies the web element within a web page. Selector Pattern is made using HTML tags, attributes and their values. CSS locators is Advantage, faster and simpler than Xpath.

Some important terms for CSS selectors
HTML tag - It is tag. HTML tags are the hidden keywords within a web page that help to define how the browser must format and display the content. In Selenium Webdriver it help to access web element which we want.
Attribute – An attribute defines a property for an web element, consists of an attribute/value pair, and appears within the opening tag. It is the attribute we want to use to create CSS Selector.
Value of attribute – It is the value of an attribute which is being access
# – The hash(#) character is used to indicate ID attribute. It is mandatory to use hash sign for ID attribute in CSS Selector.
Value of ID attribute – It is the value of an ID attribute which want to access.

. – The dot(.) character is used to introduce Class attribute in CSS locator. It is mandatory to use dot sign before class name if Class attribute is being used to create CSS Selector.
Value of ID attribute – It is the value of an ID attribute which want to access
^ – The hat(^) sign is used to match a string using prefix.
$ – The dollar($) symbol is used to match a string using suffix.
* –The symbol of asterisk(*) to match a string using sub string.
: – The dot(.) sign is used to match a string using contains method.

CSS Selector: ID

 <input id="email" type="email" tabindex="1" name="email">  
 <div id="rsi_card" class="card signin-card">  

Syntax : HTML tag_#_Value of ID attribute or HTML tag[Value of ID attribute]
Example :
WebElement idcssselector = driver.findElement(By.cssSelector("input#id=email"));
WebElement idcssselector = driver.findElement(By.cssSelector("input[id=email]"));
WebElement idcssselector = driver.findElement(By.cssSelector("div#id=rsi_card"));
WebElement idcssselector = driver.findElement(By.cssSelector("div[id=rsi_card]"));

CSS Selector: Class

 <input type="checkbox" class="uiInput" >  
 // For multiple classes  
 <input class="submit ipt second-ipt flex-table-ipt js-submit" type="email">  

Syntax : HTML tag_._Value of Class attribute
Example :
WebElement classcssselector = driver.findElement(By.cssSelector("input.uiInput"));
// For multiple classes
WebElement classcssselector1 = driver.findElement(By.cssSelector(".second-ipt"));
WebElement classcssselector2 = driver.findElement(By.cssSelector("ipt.second-ipt"));
WebElement classcssselector3 = driver.findElement(By.cssSelector("submit.second-ipt"));

CSS Selector: Attribute

 <input type="password" id="pass" name="pass">  

Syntax : HTML tag_[attribute=Value of attribute]
Example :
WebElement classcssselector = driver.findElement(By.cssSelector("input[name=pass][type=password]"));

CSS Selector: ID/Class and attribute
Syntax : HTML tag_. Or #_value of Class or ID attribute_[attribute=Value of attribute]
Example :

CSS Selector: Sub-string
Match a prefix
Syntax : HTML tag_[attribute^=prefix of the string]
Example :

Match a suffix
Syntax : HTML tag_[attribute$=suffix of the string]
Example :

Match a sub string
Syntax : HTML tag_[attribute*=sub string]
Example :


CSS Selector: Inner text
Syntax : HTML tag_:_contains_(text)
Example :

Demo Source Code