Capturing Specific Elements with CSS Selector Screenshots
Sometimes you do not need a screenshot of the entire page. You want the hero banner, the pricing table, or the navigation bar. CSS selector targeting lets you capture a specific element by its selector.
How it works
The selector parameter accepts any valid CSS selector. The API finds the matching element, calculates its bounding box, and captures just that region.
GET /v1/?url=https://example.com&selector=.hero-section
The returned image contains only the matched element, cropped precisely to its boundaries.
Practical examples
Capture a product card:
?url=https://store.example.com/products&selector=.product-card:first-child
Capture a chart or graph:
?url=https://dashboard.example.com&selector=#revenue-chart
Capture the main content area:
?url=https://blog.example.com/post&selector=article
Capture the navigation:
?url=https://example.com&selector=nav
Use cases
Design documentation. Capture individual components for style guides and design systems. Instead of full-page screenshots with manual cropping, target each component directly.
Competitive monitoring. Track how a competitor's pricing table or feature list changes over time. Capture just that section daily.
Content previews. Generate thumbnail images of specific content blocks for social sharing or internal tools.
Automated reporting. Extract charts and data visualizations from dashboards without capturing the full page with its navigation and sidebar.
Selector tips
Be specific. A selector like div matches too many elements. The API captures the first match. Use class names, IDs, or structural selectors to target the right element.
Handle dynamic content. If the element loads dynamically, combine the selector with a delay parameter to ensure it is rendered before capture.
Check element visibility. Hidden elements (display: none, visibility: hidden) have no visual bounding box. The API returns an error if the matched element is not visible.
Consider padding. The screenshot crops exactly to the element's bounding box. If you need padding around the element, use a parent container as your selector or add padding in CSS.
Limitations
- Only the first matching element is captured
- Elements that extend beyond the viewport require full page mode
- Elements inside iframes cannot be targeted (the iframe is a separate document)
- CSS transforms may affect the bounding box calculation
For most use cases, element-level screenshots reduce image size, improve relevance, and eliminate the need for post-capture cropping.