CSS Selector Parameter

Precisely capture specific elements from your webpage

---

Table of contents

• Overview
• Basic Usage
  • HTML Example
• Common Selector Types
  • Class Selectors
  • ID Selectors
  • Nested Selectors
  • Multiple Classes
• Advanced Selectors
• Best Practices
• Common Issues and Solutions
  • Element Not Found
  • Wrong Element Selected

---

Overview

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.

Basic Usage

HTML Example

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"
}

Common Selector Types

Class Selectors

To select elements by class name:

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

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

ID Selectors

To select a unique element by ID:

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

<!-- Selector -->
#header

Nested Selectors

To select nested elements:

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

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

Multiple Classes

To select elements with multiple classes:

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

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

Advanced Selectors

For more complex selections, you can use:

Best Practices

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

Common Issues and Solutions

Element Not Found

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

Wrong Element Selected

If the wrong element is captured:

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

---