Basics

Let’s look at a few basic selectors and their results when applied to a markup example.

<html>
<body>
<div id="nav">
<ul class="horizontal">
<li><a href="/home">Home</a></li>
<li><a href="/about-us">About Us</a></li> <li><a href="/contact-us">Contact Us</a></li> </ul>
<img src="/img/ad1.jpg" alt="Advertisement #1"> <img src="/img/ad2.jpg" alt="Advertisement #2"> </div>
</body>
</html>

#nav would select the div element because it has an id attribute value of nav.
li would select all li elements by their node name.
.horizontal would select the ul element because it has a class of horizontal. (Note that elements can have multiple classes.)
* would select all elements in the document.
li, a would select all li and a elements in the document by combining the two selectors li and a into a comma-delimited list.

Here are the XPath equivalents along side their respective CSS counterparts. Aside from the .class selector, the XPath expressions are not significantly longer or more complex.

Selector	CSS	XPath
id	#nav	//*[@id=“nav"]
element	li	//li
class	.horizontal	//*[@class=“horizontal" or starts-with(@class, “horizontal ") or contains(@class, “ horizontal ") or ends-with(@class, “ horizontal")]
wildcard	*	//*
multiple	li, a	//li\|//a

Category: Article | Added by: Marsipan (03.09.2014)

Views: 350 | Rating: 0.0/0

Total comments: 0