CSS selectors is a useful feature of Typeflo's CMS importing feature. It is handy when Typeflo is not able to extract specific post parameters such as title, excerpt, categories etc.
What are CSS selectors?
CSS selectors are certain properties in the HTML code of your website that let Typeflo understand what content needs to be fetched. This enables accurate data extraction from your existing website to your new Typeflo blog.
Although this approach may look difficult if you are not a developer, going through this guide will make it easy for you to understand how to use CSS selectors.
Lets get started
Step 1: To locate the necessary post parameter, navigate to a sample post URL of the website being imported in a new tab.
Step 2: On the sample post page, enter inspect mode by right-clicking and selecting "Inspect" or by using the keyboard shortcuts
CTRL+SHIFT+I
on Windows
⌘+⌥+I
on Mac
Step 3: In the inspect mode, you can identify the required parameters by hovering over the specific element.
For example, if you want to find the CSS selector for the title of your blog post, simply hover over the title. This action will highlight the corresponding element in the "Elements" tab of the inspect mode
Step 4: From the highlighted element, you can identify the CSS selector by looking at attributes such as class or id in the highlighted text.
These attributes provide the information needed to construct a CSS selector, which you can then use to target that specific element in your code.
Step 5: Copy the text found within class=" "
If there are multiple words separated by spaces like in the case below, copy only the first word before the space. This will usually be the primary class name used for that element.
Step 6: Paste the copied text into the CSS selector input field on the mapping screen of the Typeflo Dashboard.
If the text was copied from the class attribute (within class="..."), add a
.
at the beginning of the text.
If it was copied from the id attribute (within id="..."), add a
#
at the beginning.
For example, if the copied text is
post-herotitle
and it comes from the class attribute, enter it as
.post-herotitle
If it comes from the id attribute, enter it as
#post-hero__title
After entering it, click on "Find Title" to locate the corresponding element.
Step 7: After clicking on "Find Title", Typeflo will begin extracting the text from the selected element and display the value found. Verify the accuracy of the extracted text before proceeding to the next step.
Other edge cases
Edge case 1: If neither the class nor id attribute is present in the highlighted element, you can still find the CSS selector by right-clicking on the highlighted element (In the HTML editor on your browser, highlighted in yellow in the image below), selecting "Copy", and then choosing "Copy Selector"
This will copy the full CSS selector for that element, which you can then use in the Typeflo Dashboard.
Note: This method is recommended only if the blog layout is consistent across all post pages.
Edge case 2: Another alternative for finding the CSS selector when neither the class nor id attribute is present is to get the CSS selector of the container enclosing the highlighted element.
When using this approach, ensure that the CSS selector of the container is combined with the tag name of the highlighted element.
For example, if the container's class is
post-herocontent
and the highlighted element's tag name is
h1
, the selector should be written as
.post-herocontent > h1
Edge case 3: For categories, where multiple elements need to be extracted, instead of adding the CSS selector for each individual element, you should add the CSS selector of the category container.
This approach ensures that all relevant elements within the container are captured This apprach is also used to extract post content
You've learnt a bit of coding with this article now! 😎
If you are finding difficulty in using this approach, please feel free to get in touch with us!
Share help article