XPath: Difference Between `/` and `//`

Gatsby

When writing XPath queries, both / and // are used to navigate the HTML or XML structure — but they behave differently.

/ – Direct Child Selector

The single slash / selects only the immediate (direct) child of the current node.

/html/body/div

This selects a <div> that is directly inside a <body>, which is directly inside <html>.

It will not match if the <div> is nested deeper within other tags.

// – Descendant Selector

The double slash // selects any descendant, not just direct children. This includes children, grandchildren, great-grandchildren, etc.

//div

This selects all <div> elements in the document, no matter where they are.

Example

Given the following HTML:

<html>
  <body>
    <div>
      <section>
        <p>Hello</p>
      </section>
    </div>
  </body>
</html>
XPath Query What It Selects Result
/html/body/div Direct child <div> of <body> Matches
/html/body/p Direct <p> in <body> No match
/html/body//p Any <p> inside <body> Matches <p>
//p Any <p> in the document Matches <p>

Summary

Symbol Meaning Use Case
/ Direct child only When structure is known/fixed
// Any descendant When nesting is unknown or deep

Related Posts