Slashes and Brackets in Web Scraping with Python 2026: XPath vs CSS Explained

Slashes and Brackets in Web Scraping with Python 2026: XPath vs CSS Explained

When learning web scraping, many beginners get confused by slashes (`/`, `//`) and brackets (`[]`, `()`) in selectors. These symbols are the core syntax of **XPath** and behave differently from CSS selectors. In 2026, understanding when to use slashes and brackets helps you write more powerful, precise, and maintainable scrapers.

This March 24, 2026 guide clearly explains the meaning and usage of slashes and brackets in modern Python web scraping using both XPath and CSS.

TL;DR — Key Takeaways 2026

/ = direct child (like CSS >)
// = descendant anywhere in the document (very powerful)
[] = attribute or condition filter (like CSS attribute selectors)
Use ::text and ::attr(name) to extract content
CSS is usually cleaner and faster for simple tasks
XPath with slashes and brackets shines for complex relationships

1. Understanding Slashes in XPath


from scrapy.selector import Selector

# /  → direct child
sel.xpath("/html/body/div")           # only immediate children

# // → descendant (any level)
sel.xpath("//div")                    # all divs anywhere in document
sel.xpath("//div[@class='product']")  # all product divs

# Common useful patterns
sel.xpath("//a[@href]")               # all links with href
sel.xpath("//img/@src")               # all image source URLs

2. Understanding Brackets [] in XPath


# Filter by attribute
sel.xpath("//div[@class='product']")

# Filter by attribute value contains
sel.xpath("//a[contains(@href, 'python')]")

# Filter by position
sel.xpath("//li[1]")                  # first li
sel.xpath("//li[last()]")             # last li
sel.xpath("//tr[position() mod 2 = 0]")  # even rows

# Multiple conditions
sel.xpath("//button[@type='submit' and not(@disabled)]")

3. Real-World Example – Mixed CSS + XPath


from scrapy.selector import Selector

async def scrape_page(url):
    # ... fetch html ...
    sel = Selector(text=html)
    
    products = []
    for item in sel.css("div.product"):                    # CSS for main container
        product = {
            "title": item.css("h2::text").get().strip(),
            "price": item.css(".price::text").get().strip(),
            "link": item.xpath(".//a/@href").get(),        # XPath inside CSS
            "image": item.xpath(".//img/@src").get()
        }
        products.append(product)
    return products

4. XPath vs CSS – When to Use Which in 2026

Task	CSS	XPath (Slashes + Brackets)
Simple class or ID	Best	Okay
Text contains	Limited	Excellent
Parent / sibling navigation	Difficult	Excellent
Position-based selection	Good	Best
Complex conditions	Limited	Very powerful

Conclusion — Slashes and Brackets in 2026

Understanding slashes (`/`, `//`) and brackets (`[]`) is essential for mastering XPath in web scraping. While CSS selectors are cleaner for most everyday tasks, XPath with slashes and brackets gives you unmatched power for complex page structures. In 2026, the best scrapers use a smart mix of both — CSS for speed and readability, XPath when precision and relationships matter.

Next steps: