2. Basic Concepts of CSS Selectors

Before diving into advanced techniques, let’s cover the foundational concepts of CSS selectors in Selfotix. Understanding these basics will make building complex selectors easier.

Types of Selectors

• Element Selector: Targets elements by their HTML tag name.

  • Example: div selects all <div> elements.

  • Selfotix Use: Use to scrape all product containers with <div> tags.

• Class Selector: Targets elements with a specific class, prefixed with a period (.).

  • Example: .item-price selects elements with class=”item-price”.

  • Selfotix Use: Ideal for scraping prices with consistent class names.

• ID Selector: Targets a single element with a unique ID, prefixed with a hash (#).

  • Example: #main-content selects the element with id=”main-content”.

  • Selfotix Use: Perfect for targeting unique sections like a main product listing.

• Attribute Selector: Targets elements based on attributes and their values.

  • Example: [data-product-id] selects elements with a data-product-id attribute.

  • Selfotix Use: Useful for dynamic elements with custom attributes.

How to Use Selectors in Selfotix

1. Open Selfotix and create a new task.

2. In the selector field, enter your CSS selector (e.g., .item-price).

3. Use the “Pick” tool to visually select elements on the webpage, or let Selfotix’s AI generate selectors (requires credits).

4. Save and test the selector to ensure it targets the desired elements.

Example: To scrape prices from a webpage, enter .price-tag in the selector field. Selfotix will extract text from elements like <span class=”price-tag”>$19.99</span>.

3. Multiple Selector Expressions for One Element

A single HTML element can be targeted by multiple CSS selector expressions, giving you flexibility in Selfotix. This is useful when an element has multiple attributes or classes, or when you need a fallback selector.

Why Use Multiple Expressions?

• Robustness: If a webpage changes, alternate selectors may still work.

• Clarity: Different expressions can make your intent clearer.

• Precision: Combine attributes to narrow down your target.

Example

Consider this HTML for a product card:

<div class=”product-card” id=”item-123″ data-category=”electronics”>
<h3>Smartphone</h3></div>

You could target the <div> with any of these selectors:

• div.product-card

• #item-123

• [data-category=”electronics”]

• div[data-category]

Using in Selfotix

1. Add a selector in Selfotix (e.g., .product-card).

2. If the selector fails (e.g., due to a class change), try an alternate like #item-123.

3. Use the “Pick” tool to test different expressions interactively.

Tip: Start with the most specific selector (e.g., #item-123) to ensure uniqueness, but have a fallback like .product-card for flexibility.

4. Ensuring Selectors Are Correct and Unique

A correct and unique selector targets exactly the intended element(s) without including unwanted ones. In Selfotix, this ensures your scraped data is accurate and your automation tasks run smoothly.

How to Check Selector Correctness

1. Use the “Pick” Tool: Click “Pick” in Selfotix to highlight elements on the webpage. If the wrong elements are highlighted, adjust the selector.

2. Test in Results Section: Run the task and check the “Results” section. If unexpected data appears, refine the selector.

3. Use AI Assistance: Click “ASK AI” to let Selfotix generate a selector. AI will highlight valid selectors with a green border.

Ensuring Uniqueness

• Inspect the Webpage: Right-click an element in your browser and select “Inspect” to view its HTML. Check for unique classes, IDs, or attributes.

• Avoid Overly Broad Selectors: For example, div might target too many elements. Use .product-card or #item-123 instead.

• Combine Attributes: Use [data-product-id=”123″] to narrow down to a specific element.

Example

To scrape a specific button:

<button class=”btn add-to-cart” data-action=”add”>Add to Cart</button>

• Selector: .btn.add-to-cart[data-action=”add”]

• Check: Use “Pick” to confirm only the “Add to Cart” button is highlighted.

• Result: Selfotix will interact with or scrape only this button.

Tip: If a selector targets multiple elements (e.g., .btn targets all buttons), add more specificity like .add-to-cart.

5. Exact vs. Loose Matching

In Selfotix, you can choose between exact and loose matching when building CSS selectors, depending on your task requirements. This flexibility allows you to target webpage elements with precision or adaptability.

Exact Matching

• Definition: Matches elements with precise attribute values or classes.

• Use Case: When you need to target a specific element without ambiguity.

• Example: [data-product-id=”123″] matches only elements with data-product-id=”123″.

• Selfotix Use: Ideal for unique elements like a single product’s title or price.

Loose Matching

• Definition: Matches elements with partial attribute values or broader patterns.

• Use Case: When elements have dynamic or varying attributes.

• Example: [data-product-id*=”123″] matches any element with data-product-id containing “123” (e.g., “prod-123” or “123-xyz”).

• Selfotix Use: Useful for scraping similar elements with slightly different attributes, such as product names across a category.

Attribute Operators for Loose Matching

• ^= (starts with): [href^=”https”] matches links starting with “https”.

• $= (ends with): [data-sku$=”-sale”] matches elements with data-sku ending in “-sale”.

• *= (contains): [class*=”product”] matches elements with “product” in the class name.

Example

For a product name:

<h3 class=”product-title” data-product-id=”item-123″>Smartphone Deluxe</h3>

• Exact: .product-title[data-product-id=”item-123″] targets only the specific product name “Smartphone Deluxe”.

• Loose: [class*=”product”] targets any element with “product” in the class, such as all product titles on the page.

• Selfotix Use: Use loose matching to scrape all product names, exact matching to scrape a specific product’s name.

Tip: Begin with exact matching for precise targeting, but opt for loose matching if the webpage’s attributes vary frequently, ensuring your selectors remain robust.

6. Understanding Hierarchy in Selectors

Hierarchy refers to the parent-child or ancestor-descendant relationships between HTML elements. In Selfotix, hierarchical selectors let you target elements based on their position in the DOM (Document Object Model).

Types of Hierarchical Selectors

• Descendant Selector (space): Targets elements inside another element, regardless of nesting level.

  • Example: .product-list h3 targets <h3> elements inside .product-list.

• Child Selector (>): Targets direct children only.

  • Example: .product-list > div targets <div> elements directly under .product-list.

• Sibling Selectors (see Section 9): Target elements at the same level.

Example

<div class=”product-list”>
<div class=”product-card”>
<h3>Smartphone</h3>
<p>Price: $499</p>
</div>
</div>

• Descendant: .product-list h3 targets the <h3> (Smartphone).

• Child: .product-list > div targets the <div class=”product-card”>.

• Selfotix Use: Use .product-list h3 to scrape all product titles.

Building Hierarchical Selectors in Selfotix

1. Inspect the webpage to identify parent-child relationships.

2. Use spaces for descendants or > for direct children.

3. Test the selector to ensure it targets the correct elements.

Tip: Be specific with hierarchy to avoid targeting unintended nested elements. For example, .product-list > div is more precise than .product-list div.

7. Combining Filters with Standard CSS Logic

You can combine multiple selectors and filters in Selfotix to create precise targeting rules using standard CSS logic. This is powerful for complex webpages with overlapping elements.

Combining Selectors

• Multiple Classes: Target elements with multiple classes.

  • Example: .btn.add-to-cart targets <button class=”btn add-to-cart”>.

• Type and Class: Combine element type with a class.

  • Example: a.product-link targets <a class=”product-link”>.

• Attributes and Classes: Combine attributes with classes.

  • Example: .item-price[data-currency=”USD”] targets prices in USD.

Pseudo-Classes for Dynamic States

• :first-child: Targets the first child element.

  • Example: .product-card:first-child targets the first product card.

• :nth-child(n): Targets the nth child.

  • Example: .product-card:nth-child(2) targets the second product card.

• :hover: Targets elements on hover (useful for testing).

  • Example: a:hover (not typically used in Selfotix scraping).

Example

<div class=”product-grid”>
<div class=”product-card featured” data-currency=”USD”>
<span class=”item-price”>$99</span>
</div>
<div class=”product-card”>
<span class=”item-price”>$79</span>
</div>
</div>

• Selector: .product-grid .product-card.featured .item-price

• Result: Targets the price ($99) in the featured product card.

• Selfotix Use: Scrape only featured product prices.

Tip: Use the “Pick” tool to test combined selectors, and refine them if too many elements are matched.

8. Handling Lists with Incremental Selectors

Selfotix makes it easy to target items in lists (e.g., product grids, search results) using incremental selectors and UI controls. Use the “Start From nth Element” and “Number of Elements” fields to select specific items or ranges.

Identifying Lists

Lists often use tags like <li>, <div>, or <article> with similar classes. Example:

<ul class=”product-grid”>
<li class=”product-item”>Product A</li>
<li class=”product-item”>Product B</li>
<li class=”product-item”>Product C</li>
</ul>

• Base Selector: .product-item targets all items.

• Specific Item: .product-item:nth-child(1) targets “Product A”.

Incremental Selectors

• :nth-child(n): Targets the nth item (1-based, e.g., :nth-child(2) for “Product B”).

• >> nth=n: Selfotix’s 0-based syntax (e.g., >> nth=1 for “Product B”).

• UI Fields: Set “Start From nth Element” (1-based) and “Number of Elements” to define ranges.

Using in Selfotix

1. Find the List: Inspect the webpage to identify the list’s class (e.g., .product-item).

2. Add Selector: Enter the base selector (e.g., .product-item) in a new selector field.

3. Set Range:

   • “Start From nth Element”: E.g., 2 for the second item.

   • “Number of Elements”: E.g., 2 to scrape two items.

4. Test: Use the “Pick” tool or run the task to verify results.

5. Scrape All: Use the base selector without limits for all items.

Example: To scrape “Product B” and “Product C”:

• Selector: .product-item

• Start: 2

• Number: 2

• Result: Scrapes “Product B” and “Product C”.

Tips

• Use UI fields over :nth-child for simplicity.

• Verify list structure with browser developer tools.

• Test selectors with “Pick” to ensure accuracy.

• Combine with pagination for multi-page lists.

• Keep selectors broad (e.g., .product-item) unless specificity is needed.

Example: Scrape three product names:

1. Add selector .product-item.

2. Set “Start” to 1, “Number” to 3, “Data Type” to “Text”.

3. Run task to scrape “Product A”, “Product B”, “Product C”.

9. Addressing Sibling Elements

Sibling selectors target elements that share the same parent, allowing you to select elements based on their position relative to others. This is useful in Selfotix for targeting elements like prices next to product titles.

Types of Sibling Selectors

• Adjacent Sibling (+): Targets the element immediately following another.

  • Example: h3 + p targets a <p> right after an <h3>.

• General Sibling (~): Targets all siblings following an element.

  • Example: h3 ~ p targets all <p> elements after an <h3>.

Example

<div class=”product-card”>
<h3>Smartphone</h3>
<p class=”price”>$499</p>
<p class=”description”>Latest model</p>
</div>

• Adjacent: h3 + p targets the price ($499).

• General: h3 ~ p targets both the price and description.

• Selfotix Use: Use h3 + p to scrape only the price.

Using in Selfotix

1. Inspect the HTML to identify sibling relationships.

2. Use + for immediate siblings or ~ for all following siblings.

3. Test the selector to ensure it captures the correct element.

Tip: Adjacent siblings (+) are more precise, so use them when you need a specific element.

10. Tips for Success in Selfotix

• Use the “Pick” Tool: Visually select elements to avoid manual errors.

• Leverage AI: Use “ASK AI” to generate selectors when you’re stuck (requires credits).

• Test Incrementally: Run tasks with a single selector before adding complexity.

• Inspect HTML: Use your browser’s developer tools to understand the webpage structure.

• Start Specific: Use IDs or unique attributes for reliability, then broaden if needed.

• Save Selectors: Store working selectors in task folders for reuse.

• Handle Dynamic Pages: Use loose matching or hierarchical selectors for sites with changing content.

Conclusion

Building CSS selectors in Selfotix is a skill that unlocks powerful web scraping and automation capabilities. By understanding selector types, hierarchy, and advanced techniques like incremental and sibling selectors, you can target any webpage element with precision. Practice with the “Pick” tool, experiment with AI assistance, and refine your selectors to make your Selfotix tasks seamless and efficient. Happy automating!