White Box Testing
Test your code
   Home      selenium2WebDriver-CSS-Selector-Cheatsheet
 
 
CSS Selector CheatSheet

CSS (Cascading Style Sheet) selector constructed using CSS, HTML tags, HTML tags attribute and DOM.  Usually we use CSS selector when we don’t find any option to select element uniquely by name, id or link.
 
CSS selector is simple to read and more faster as compared to XPATH.
 
 
<ul type="text" id="type_vehicle_cat" name="vehicle_name" style="style_name" class="myForm text_primary summary">
   <li>Bycycle</li>
   <li>Car</li>
   <li>Bus</li>
<ul>

Element by id
css=ul#type_vehicle_cat or  css=#type_vehicle_cat
 
 
Element by class
css=ul.myFrorm
css=.myFrorm
css=.myFrorm.text_primary
css=.myFrorm.text_primary.summary
 
 
Direct child element
css=ul#type_vehicle_cat > li
 
 
Sub child element
css=ul#type_vehicle_cat  li
 
 
Element by attribute
css=ul[name="vehicle_name"][ style="style_name"]
css=ul[id="type_vehicle_cat"]
 
 
Element by pattern matching
css=ul[id^="type"]
css=ul[id$="cat"]
css=ul[id*="vehicle"]    
css=ul:contains(_vehicle_)
 
 
To select first child element
css=ul#type_vehicle_cat  li:first-child
css=ul#type_vehicle_cat  li:nth-of-type(1)
 
 
To select intermediate child element
css=ul#type_vehicle_cat  li:nth-of-type(2)
 
 
To select last child element
css=ul#type_vehicle_cat  li:last-child
css=ul#type_vehicle_cat  li:nth-of-type(3)
 
 
To select element by adjacent locators
css=li + li + li