title: Differentiating between xpaths
body: <p>I was wondering how to differentiate between the paths between these two HTMLs. </p>
  
  <p>//button[@class="search-results__pagination-next-button"] seems to get both of the items. </p>
  
  <pre class="lang-html prettyprint-override"><code>
  &lt;button class="search-results__pagination-next-button" type="button" data-ember-action="" data-ember-action-5268="5268"&gt;
      &lt;span class="v-align-middle"&gt;
        Next
      &lt;/span&gt;
      &lt;li-icon aria-hidden="true" type="chevron-right-icon" class="v-align-middle" size="small"&gt;&lt;svg viewBox="0 0 24 24" width="24px" height="24px" x="0" y="0" preserveAspectRatio="xMinYMin meet" class="artdeco-icon" focusable="false"&gt;&lt;path d="M9,8L5,2.07,6.54,1l4.2,6.15a1.5,1.5,0,0,1,0,1.69L6.54,15,5,13.93Z" class="small-icon" style="fill-opacity: 1"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/li-icon&gt;
    &lt;/button&gt;
  
  
  
  &lt;button disabled="" class="search-results__pagination-next-button" type="button" data-ember-action="" data-ember-action-4958="4958"&gt;
      &lt;span class="v-align-middle"&gt;
        Next
      &lt;/span&gt;
      &lt;li-icon aria-hidden="true" type="chevron-right-icon" class="v-align-middle" size="small"&gt;&lt;svg viewBox="0 0 24 24" width="24px" height="24px" x="0" y="0" preserveAspectRatio="xMinYMin meet" class="artdeco-icon" focusable="false"&gt;&lt;path d="M9,8L5,2.07,6.54,1l4.2,6.15a1.5,1.5,0,0,1,0,1.69L6.54,15,5,13.93Z" class="small-icon" style="fill-opacity: 1"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/li-icon&gt;
    &lt;/button&gt;
  </code></pre>