CSS selectors allow you to precisely identify and extract specific content from web pages and save it to your Notion database. This feature is particularly useful when you want to capture certain parts of a webpage, such as titles, author names, or specific paragraphs.
To get started with setting CSS selectors, you should first be familiar with how to set up a database form.
Once you know how to set up your form, open the webpage from which you want to capture your content, then follow these steps to set the CSS selectors:
Step 1: Select the Database Property
- In your Copy To Notion extension, go to the Database Form Settings.
- Select the property you want to use.
- In the options on the right, select “Text content by CSS selector”.
the properties that support CSS selectors are: page title, URLs, and texts.
Step 2: Set CSS Selectors
There are two ways in Copy To Notion to set the CSS selectors. If you have knowledge of CSS, it is preferable to use the manual method.
Option 1: Manually Entering CSS Selectors
- For the selected database property, specify a CSS selector that identifies the HTML content you want to capture.
- Enter the CSS selector directly into the input field.
Option 2: Automatically Selecting CSS Selectors
- Click the arrow icon next to the CSS selector input field.
- This will activate a mode where you can click on any element on the webpage.
- Click on the desired element, and its CSS selector will be automatically populated in the input field.
Important Notes and Tips:
- The CSS selector will capture the content of the first element on the page that satisfies it.
- Ensure that your CSS selectors are specific enough to target the correct elements without capturing unintended content.
- For dynamic pages (like LinkedIn profiles), test your CSS selectors on multiple pages to ensure they work consistently across different profiles or variations of the page.
- If a CSS selector stops working after some time, it's likely that the page structure has changed. In this case, you'll need to update your selector to match the new structure.
Step 3: Set up automatic form selection
If you want the form you're configuring to be automatically selected when clipping from specific websites, go to Site settings and set them up.
For detailed instructions, see our guide on setting up automatic form selection for specific websites.
Step 4: Save your form
After you've finished setting up your form, click 'SAVE & RETURN'.
By following these steps and keeping these tips in mind, you can efficiently capture specific HTML content into Notion database properties, enhancing your productivity and content management.