Selenium - CSS Locators

Here are some tips to use CSS locators in your selenium automation projects.
Just go through this XML structure. I going to speak about some locators to get inside elements. 

1. <div id='testdiv'>
2. <span><a href='http://sds1'>my Link2</a></span>
3. <a href='http://sds'>my Link1</a>
4. <div class='myDiv1'><a href='sds'>my link3</a></div>
5. <form>
6. <input class="username"></input>
7. <input class="alias"></input>
8. <input type="hidden" name="vid" value="442bbdf4-9226-41cd-801e-0d065a16cc52"><input type="hidden" name="lf_cid" value="LF_c10cf6d6"></form>
9. </div>

Direct Child:
css=div > a               //This will give you 'My Link1' element


Child or SubChild:
css=div a                   //This will give you 'My Link2' element


ID:
css=div#testdiv         //This will give you 'testdiv' element


Class:
css=div.myDiv1        //This will give you 'myDiv1' element


Next Sibling:
css=form input.username + input   //This will give you 'alias' input under form


Using Attribute values:

1. css=form input[name='username']  //This will give you input field under form with name='username'
2. css=input[name='continue'][type='button']  //This will do AND operation

SubStrings:

1. css=a[id^='id_prefix_']  //Like starts-with
2. css=a[id$='_id_sufix']   //Like ends-with
3. css=a[id*='id_pattern']  //Like contains

Using InnerText:
css=a:contains('Log Out')  //Link contains InnerText


Others:
Sometimes you have to find elements using count and type etc. Here you can use nth-child or nth or nth-of-type. Consider this structure...

1. <ul id="recordlist">
2. <p>Heading</p>
3. <li>Cat</li>
4. <li>Dog</li>
5. <li>Car</li>
6. <li>Goat</li>
7. </ul>

1. css=ul#recordlist li:nth-child(4)   //This will give you 'Car'. Finds childs with type 'li'
2. css=ul#recordlist *:nth-child(4)  //This will give you 'Car'. Finds any-type child
3. css=ul#recordlist li:nth(3)    //This will give you 'Goat'
4. css=ul#recordlist *:nth(4)    //This will give you 'Goat'
   css=ul#recordlist li:first-child    //This will give you 'Cat'
   css=ul#recordlist li:last-child

Other Common ways to use:
XPath Type : Functions
Always we have chances to meet locator problems while elements with same attributes, ids, names, etc. These kind of scenarios can be solved by using below techniques. Normally we can use 4 ways to identify the elements.
1. String
2. Boolean
3. Number
4. Node-Set
Here they are,

1. Node-Set: last(), position(), count(), id(), local-name(), namespace-uri(), name()
2. String: string(), concat(), starts-with(), contains(), substring-before(), substring-after(), substring(), string-length(), normalize-space(), translate()
3. Boolean: boolean(), not(), true(), false(), lang()
4. Number: number(), sum(), floor(), ceiling(), round()

Here are some examples.

1. selenium.click("xpath=(//input[@type='checkbox'])[last()]");
2. selenium.click("xpath=(//input[@type='submit'])[last()-1]");
3. selenium.click("xpath=(//input[@type='checkbox'])[position()=2]");

Hope this will you some ideas about CSS locators to use in your projetcs....