Basic CSS Locators

Sample HTML chunk:

<div id=”page”>

<ul id=”index”>

<li>

<div class=”actions”>

<h3>Test 01</h3>

<a class=”1″>

<a class=”2″>

</div>

<li>

<div class=”actions”>

<h3>Test 02</h3>

<a class=”1″>

<a class=”2″>

</div>

Sample CSS Locators:

	Element	Locators
1	Page	css=div#page
		css=div[id=page]
		id=page
2	Index	css=div#page>ul#index
		css=div[id=page] ul[id=index]
		css=ul#index
3	Actions	css=div.actions
		css=div[class=actions]
4	First a child of first li element	css=ul#index>li>div.actions>a:first-child
		css=ul[id=index] li div[class=action] a:first-child
		css=ul#index>li>div.actions>a
5	Last/Second a child of second li element	css=ul#index>li:nth-child(2)>div.actions>a:last-child
		css=ul#index>li:nth-child(2)>div.actions>a:nth-child(2)
6	Heading containing text	css=h3:contains(‘Test 01′)

For a comprehensive list of CSS Selector Syntax, check this link:  http://www.w3.org/TR/css3-selectors/

<ul id=”index”>
<li>
<div class=”action_buttons”><a title=”Show Arthur C. Ortiz” href=”/people/arthur-c-ortiz” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-document”></span><span class=”ui-button-text”>Show</span></a><a title=”Edit Arthur C. Ortiz” href=”/people/arthur-c-ortiz/edit” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-pencil”></span><span class=”ui-button-text”>Edit</span></a><a title=”Delete Arthur C. Ortiz” rel=”nofollow” data-method=”delete” data-confirm=”Are you sure you want to delete Arthur C. Ortiz?” href=”/people/arthur-c-ortiz” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-trash”></span><span class=”ui-button-text”>Delete</span></a></div>
<h3>Arthur C. Ortiz</h3></li>
<li>
<div class=”action_buttons”><a title=”Show Carlos Tucker” href=”/people/carlos-tucker” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-document”></span><span class=”ui-button-text”>Show</span></a><a title=”Edit Carlos Tucker” href=”/people/carlos-tucker/edit” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-pencil”></span><span class=”ui-button-text”>Edit</span></a><a title=”Delete Carlos Tucker” rel=”nofollow” data-method=”delete” data-confirm=”Are you sure you want to delete Carlos Tucker?” href=”/people/carlos-tucker” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-trash”></span><span class=”ui-button-text”>Delete</span></a></div>
<h3>Carlos Tucker</h3></li>
<li>
<div class=”action_buttons”><a title=”Show Catherine Rose” href=”/people/catherine-rose” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-document”></span><span class=”ui-button-text”>Show</span></a><a title=”Edit Catherine Rose” href=”/people/catherine-rose/edit” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-pencil”></span><span class=”ui-button-text”>Edit</span></a><a title=”Delete Catherine Rose” rel=”nofollow” data-method=”delete” data-confirm=”Are you sure you want to delete Catherine Rose?” href=”/people/catherine-rose” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-trash”></span><span class=”ui-button-text”>Delete</span></a></div>
<h3>Catherine Rose</h3> 

</li>
<li>
<div class=”action_buttons”><a title=”Show Christina Sims” href=”/people/christina-sims” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-document”></span><span class=”ui-button-text”>Show</span></a><a title=”Edit Christina Sims” href=”/people/christina-sims/edit” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-pencil”></span><span class=”ui-button-text”>Edit</span></a><a title=”Delete Christina Sims” rel=”nofollow” data-method=”delete” data-confirm=”Are you sure you want to delete Christina Sims?” href=”/people/christina-sims” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-trash”></span><span class=”ui-button-text”>Delete</span></a></div>
<h3>Christina Sims</h3>

</li>
<li>
<div class=”action_buttons”><a title=”Show Christopher R. Young” href=”/people/christopher-r-young” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-document”></span><span class=”ui-button-text”>Show</span></a><a title=”Edit Christopher R. Young” href=”/people/christopher-r-young/edit” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-pencil”></span><span class=”ui-button-text”>Edit</span></a><a title=”Delete Christopher R. Young” rel=”nofollow” data-method=”delete” data-confirm=”Are you sure you want to delete Christopher R. Young?” href=”/people/christopher-r-young” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-trash”></span><span class=”ui-button-text”>Delete</span></a></div>
<h3>Christopher R. Young</h3>

</li>
<li>
<div class=”action_buttons”><a title=”Show Cynthia Fuller” href=”/people/cynthia-fuller” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-document”></span><span class=”ui-button-text”>Show</span></a><a title=”Edit Cynthia Fuller” href=”/people/cynthia-fuller/edit” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-pencil”></span><span class=”ui-button-text”>Edit</span></a><a title=”Delete Cynthia Fuller” rel=”nofollow” data-method=”delete” data-confirm=”Are you sure you want to delete Cynthia Fuller?” href=”/people/cynthia-fuller” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-trash”></span><span class=”ui-button-text”>Delete</span></a></div>
<h3>Cynthia Fuller</h3>

</li>
<li>
<div class=”action_buttons”><a title=”Show Debra Wagner” href=”/people/debra-wagner” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-document”></span><span class=”ui-button-text”>Show</span></a><a title=”Edit Debra Wagner” href=”/people/debra-wagner/edit” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-pencil”></span><span class=”ui-button-text”>Edit</span></a><a title=”Delete Debra Wagner” rel=”nofollow” data-method=”delete” data-confirm=”Are you sure you want to delete Debra Wagner?” href=”/people/debra-wagner” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-trash”></span><span class=”ui-button-text”>Delete</span></a></div>
<h3>Debra Wagner</h3>

</li>
<li>
<div class=”action_buttons”><a title=”Show Dennis Matthews” href=”/people/dennis-matthews” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-document”></span><span class=”ui-button-text”>Show</span></a><a title=”Edit Dennis Matthews” href=”/people/dennis-matthews/edit” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-pencil”></span><span class=”ui-button-text”>Edit</span></a><a title=”Delete Dennis Matthews” rel=”nofollow” data-method=”delete” data-confirm=”Are you sure you want to delete Dennis Matthews?” href=”/people/dennis-matthews” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-trash”></span><span class=”ui-button-text”>Delete</span></a></div>
<h3>Dennis Matthews</h3>

</li>
<li>
<div class=”action_buttons”><a title=”Show Diana Burton” href=”/people/diana-burton” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-document”></span><span class=”ui-button-text”>Show</span></a><a title=”Edit Diana Burton” href=”/people/diana-burton/edit” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-pencil”></span><span class=”ui-button-text”>Edit</span></a><a title=”Delete Diana Burton” rel=”nofollow” data-method=”delete” data-confirm=”Are you sure you want to delete Diana Burton?” href=”/people/diana-burton” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-trash”></span><span class=”ui-button-text”>Delete</span></a></div>
<h3>Diana Burton</h3>

</li>
<li>
<div class=”action_buttons”><a title=”Show Edward Torres” href=”/people/edward-torres” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-document”></span><span class=”ui-button-text”>Show</span></a><a title=”Edit Edward Torres” href=”/people/edward-torres/edit” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-pencil”></span><span class=”ui-button-text”>Edit</span></a><a title=”Delete Edward Torres” rel=”nofollow” data-method=”delete” data-confirm=”Are you sure you want to delete Edward Torres?” href=”/people/edward-torres” class=”ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary” role=”button”><span class=”ui-button-icon-primary ui-icon ui-icon-trash”></span><span class=”ui-button-text”>Delete</span></a></div>
<h3>Edward Torres</h3>

</li>
</ul>