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
© CSS Selector Libraries — Web Scraping

>>> Back to TABLE OF CONTENTS <<<
Category: Article | Added by: Marsipan (03.09.2014)
Views: 313 | Rating: 0.0/0
Total comments: 0
Log in:
avatar