selector

Precisely capture specific elements from your webpage

The selector parameter allows you to capture specific elements from a webpage by providing a CSS selector. The API will automatically crop the image to match the dimensions of the selected element.

Consider this HTML structure:

<div class="margin">
  <div class="content">
    This is an example
  </div>
</div>

To capture only the inner content div, set the selector parameter:

{
  "html": "<div class=\"margin\">...</div>",
  "selector": ".content"
}

To select elements by class name:

<!-- HTML -->
<div class="profile-card">...</div>

<!-- Selector -->
.profile-card

To select a unique element by ID:

<!-- HTML -->
<div id="header">...</div>

<!-- Selector -->
#header

To select nested elements:

<!-- HTML -->
<div class="container">
  <section class="content">
    <article class="post">...</article>
  </section>
</div>

<!-- Selector -->
.container .content .post

To select elements with multiple classes:

<!-- HTML -->
<div class="card premium featured">...</div>

<!-- Selector -->
.card.premium.featured

For more complex selections, you can use:

1. Be Specific: Use precise selectors to ensure you capture exactly what you need
2. Test First: Verify your selector works in the browser before using it in the API
3. Consider Dynamic Content: Allow time for JavaScript-rendered content using ms_delay if needed
4. Unique Identifiers: When possible, use IDs for more reliable selection

If your selector doesn’t match any elements, try:

• Verifying the selector syntax
• Ensuring dynamic content has loaded (use ms_delay)
• Checking for typos in class/ID names

If the wrong element is captured:

• Make your selector more specific
• Use unique identifiers when possible
• Check for duplicates