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.

Select an HTML element without a unique id or class

Sometimes an HTML element you need to select does not have an id or class that is unique within a page. When selecting these HTML elements, a more complicated CSS selector is required.

<div class="Header">
   <a href="https://www.example.com/">
     <div>...</div>
   </a>
   <div class="SearchBar">...</div>
   <div class="TagLine">...</div>
</div>

For instance, in the example, above we want to select the DIV element within the link. To do this, we need to specify a CSS selector that works down from the unique DIV with the Header class.

div.Header a div

CSS selectors are a standard feature of web development. This article gives a good overview of how to use CSS selectors.

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

Getting a CSS Selector from the browser

You can get the CSS selector from the Chrome browser in two simple steps.

Right click on the part of the web page you are interested in and click Inspect. This will open the inspector window.

Right click on the element in the inspector window click Copy and then click Copy selector.