Tools to Capture and Convert the Web

Using CSS Selectors in GrabzIt

CSS selectors are used in the target element, hide element and wait for element features to identify one or more HTML elements. The two main types of CSS selectors is to either select by id or class. An HTML element has a id if it contains the id attribute as shown below.

<span id="myidentifier">Example Text</span>

To select it you create a CSS selector like #myidentifier

If an HTML element has a class it will have the class attribute as shown in this example.

<div>
<span class="myclass">Example Text One</span>
<span class="myclass">Example Text Two</span>
<span class="myclass">Example Text Three</span>
</div>

To select it you create a CSS selector like .myclass

If you wanted to select a particular element with the class of myclass you can use a standard CSS selectors to do so in this case the nth-child(2) selector like so: .myclass:nth-child(2) to select the second myclass span. However this will only work in this case because there are no other elements under the parent div element. If there was a p element for instance it would alter the nth-child index.

Handling Multiple Matching Elements

If multiple HTML elements are returned from a CSS selector and you are using the target element or wait for element features only the first matching element would be used. However if you are using the hide element feature all matching HTML elements would be hidden.

If you wanted to hide multiple elements with different ids or classes you can do so by separating each CSS selector with a comma. So for instance to hide the example class and id above you would use the following #myidentifier,.myclass

Back to SupportMore Web Capture ArticlesCommunity Web Capture Questions
Try all our premium features for free with a 7 day free trial. Then from $5.99 a month, unless cancelled.
  • More Captures
  • More Features
  • More API's
  • Bigger Scrapes
  • Bigger Captures
  • Bigger Everything
Start Free Trial