html - How to select first element via XPath?

Question

I have the following HTML structure

<div class="carousel">
  <ul class ="carousel-view">
    <li>
      <figure>
        <a id="one"/>
      </figure>
    </li>
    <li>
      <figure>
        <a id="two"/>
      </figure>
    </li>
  </ul>
</div>

How do I use XPath to access the first a element? Notice there are multiple a elements inside the list.

Answer 1

Any of these XPath expressions will select the first a element:

• (//a)[1] selects first a in the whole document.
• (/div/ul/li/figure/a)[1] selects first a with shown heritage.
• (//div[@class='carousel']/ul/li/figure/a)[1] restricts heritage.
• (//div[@class='carousel']//a)[1] abstracts away some heritage.

Choose depending upon the context of your shown XML in your actual document and whether you wish to restrict the a elements to only those under certain other elements.

Common Mistake

Note that //a[1] actually selects multiple a elements:

<a id="one"/>
<a id="two"/>

because //a[1] means select the a elements that are the first child of its parent.

You must use parentheses (//a)[1] to select

<a id="two"/>

alone as the first a in the document.