Custom CSS Locator Creation Technique

Previously we learn how to create or get the CSS Path from FirePath(Firefox browser Add-ons).

Here we try to learn the meaning of each and every element in CSS path.

Some Basic Of CSS-Path  
.
 It denote the class name

 e.g:- .editable

#
 It is used when we try to find element using id

 e.g:- #postingComposeBox

> or Space
 When we try to access the webelement which is direct child of the particular element then use >
 If we try to access the webelement which is maybe child or sub child then use Space

e.g:- div>a Here a is direct child of div element
         div a  Here a is sub-child and child also

tag[attributename="attributevalue"]
 We can directly access any webelement using the attributename and the corresponding value

 e.g:- div[class="field-item even"][name='test']>pre

tag[attributename~="attrivutevalue"]
 We can matching the exact word from attribute value string

 e.g:-iframe[title ~="utility"]

Sub String Matching

^=	Match a prefix
$=	Match a suffix
*=	Match a substring

tag[attributename^="attrivutevalue"]
 Attribute value text starts with Addtext
e.g:-iframe[title^="Add"]

tag[attributename$="attrivutevalue"]
 Attribute value text ends with me text
e.g:-iframe[title$="me"]

tag[attributename*="attrivutevalue"] 
 Attribute value text contains lity text
 e.g:-iframe[title*="lity"]