A powerful feature of the web clipper app is the ability to use CSS selectors to capture default values (text or images) for a clip action.
Getting started with CSS selectors
- Prefill text from an element on a website into a text, number, or image field
- In most cases, you are targeting a single website such as an internal directory for your company
- The CSS selector requires you to understand the markup of the website you are targeting
- The web clipper will only select the first element that it matches
What is a CSS selector?
CSS(cascading style sheets) selectors allow you to choose elements on a page that match a pattern you supply. The pattern can be made up of the same elements, classes, ids, and attributes that are used to style a page with CSS.
Because CSS is widely used by websites, many resources like this CSS Selectors Reference will have more examples of how to use selectors.
Setting the CSS selector as the default value
In the web clipper app configuration, you can choose the CSS selector for the default value for the following field types:
- text-based field types (single line text, long text, phone number, email, and URL)
- number-based fields (number, percent, and currency)
- attachment fields
Inspecting the source code of a web page
All mainstream web browsers have options to look at the source code of a webpage. The Airtable web browser extension is available for Chrome so the following example shows the Inspect Element functionality in the Chrome DevTools.
To view the source code, open the elements tab by right-clicking on the page and select “Inspect”. You can also use shortcuts such as Ctrl + Shift + J or Cmd + Opt +J . A DevTools panel will appear with the HTML code for the page.
You can use your mouse to inspect any element on the page by selecting the first icon in the toolbar at the top of the new pane.
When mousing over an element, a tooltip with the element details will pop up and the corresponding HTML will be highlighted in the Elements tab. For simple CSS selectors, the popup will have all the information you need while you would use the HTML in the Elements tab to guide you with more complex CSS selectors.
CSS selector examples
Understanding elements, ids, classes, and attributes
The structure of HTML consists of elements in angle brackets such as <div> ,<img>, <i>, and so many more. Within the element can be text such as “cameron@example.com” within a span tag. It is this text that we want as the default value in the clip action.
<span>cameron@example.com</span>
Because there are many span elements on a web page, we need a way to specify exactly what text to capture within what element. To do this, we can create a pattern for a CSS selector to find all elements that match. These patterns can be made up of elements, classes, attributes, and ids.
- Each element can have multiple attributes that are also within the angle brackets. These attributes are in the form of the attribute name and its value (
name=“value”) such as href=“#”.
- The id of the element is a special attribute that uniquely identifies the element on the page such as
id=“box”.
- The class of an element is another special attribute that is heavily used to style a page. It is in the form of
class=“” in the HTML.
Selecting by id
Each HTML element (headings, images, paragraphs, etc.) can have an id and that id has to be unique on the page. Look for the id attribute in the element or a # before the name of the id. Choosing an id as your CSS selector is ideal but your page could have no ids at all.
While in Inspect Element mode, we can see that the image we want to capture is img#profile-box. Although we use an image as an example here, you can also use ids for text if one exists.
In our clip action, we can set the CSS selector to #profile-box which correctly fetches the image.
Selecting by class
If you cannot find an id for the image or text you want to capture, your next best option is to look at classes. Classes in HTML are used for styling purposes and so they may be used on multiple elements on a page. If the class is applied to just one element on a page or the element you want is the first one with that class on the page, you can use that class as the CSS selector. Look for a “.” before the class name in the popup or the class attribute in the Elements tab.
In this example, the text under the person’s name has a class of maintext and the paragraph <p> element is the only element on the page with that class.
In our clip action, we add the class name with as .maintext.
Selecting by nested classes
Sometimes a class is applied to multiple elements such as the details class for many elements on this example page. Using just the class for the CSS selector will capture the first element on the page with that class.
In this example, we have six elements that have the details class. If we are trying to capture “Pythia Corporation”, we will need to be more specific than using.details since that client is the fifth element with that class. A solution for this is to nest CSS selectors such as .clients .details to get the text for the first element with the details class nested within the clients <div> element.
The .clients .details CSS selector populates the High value clients field in the clip action.
Selecting the first or last or nth item
If you have a whole list of elements and you are certain the order and number of elements will not change, you can choose the nth item in that list. For example, the contact details for this page all have the class of details. To get the email address, we could choose to capture the value by selecting the second element in the list.
In the clip action, you can use .details:nth-child(2) to get the text for that second element with the details class. Note that you don’t have to include the nested <span> element since there is just one element with text to capture.
Other CSS selectors that use element order are first-child and last-child such as .details:last-child to capture the phone number.
Selecting by element
Classes and ids are your best options for CSS selectors since they allow you to be specific in which element you want to choose. However, you can sometimes use just the element itself if you are absolutely confident that it is either the only element on the page or it will always be the first element of that kind of the page.
In our example, there is only one h2 (heading 2) element on the page and it has the value of the person’s name.
If we could not determine a way to use classes or ids to select that name, we could use just h2 as the CSS selector.
Selecting by an attribute
Although the easiest approach is to use ids and classes, you can also use attributes of the element in the CSS selector. Attributes are in the form of name="" within the HTML. Both ids and classes are attributes that have special syntax to select them such as # for id and a dot "." for classes. For any other attribute, you can write a CSS selector using square brackets [ ] .
For example, the link for the department has an href attribute to point to a web page.
We can write a CSS selector to find the element with an href attribute that is also nested within the department <div> as #dept [href]. A <div> in HTML is a container for other elements. Because we only have one link in the department <div>, we are certain to get the value we want.
If there was another link in that department <div> for perhaps a link to the url of www.example.net, we could further define the CSS selector by looking for the “.com“ within the href value such as #dept [href*='.com'].
This CSS Selectors Reference page provides even more examples of how to select particular elements on a page.
This document has been composed with the instant HTML edior tools. Click here and test it for free.