Smart Copy and CSS Selectors

ruthfarrell · ‎Aug 24, 2020

Smart Copy automatically imports your blog into HubSpot by using a combination of CSS, schema markup, and meta tag selectors to find all your blog post features (e.g., author, title, post body, etc.).

However, blogs across the web are built with different markup depending on the developer or the CMS. This can sometimes make it difficult for the tool to read the blog template’s markup. In these cases, we ask you to manually enter a CSS selector that will help us import that feature.

But first of all, what is a CSS Selector?

CSS selectors identify HTML elements on a webpage so that they can be targeted by other code, such as CSS stylesheets or JavaScript. The main types of CSS selectors are:

Tag - A tag/type selector is the name of the tag <>.

Examples: div span p h1 h6
Class - A class selector is the name of the class preceded by a dot.

Examples: .featuredContent .blog_banner .blog-title
ID - An ID selector is the name of the ID preceded by a hashtag.

Examples: #post-title #blog-content #news_heading34

By inputting a CSS selector within Smart Copy, you’re giving us the information we need to import the right feature into your HubSpot blog.

How can I find a CSS Selector?

We cover finding CSS selectors using the Chrome browser in the Smart Copy Knowledge Base article. This article includes links to developer resources for other web browsers. There are also Chrome extensions that can help you to find and copy a CSS selector. For the best results, refer to the documentation for the web browser you’re using.

However, when working with Smart Copy, it’s not sufficient to find and copy any CSS selector. It’s important to find a good CSS selector, which often involves inspecting the source code of your blog.

What makes a good CSS Selector?

A good CSS selector is one that is both broad enough to work on every blog post, while also being specific enough to identify the right content. Consider the examples below:

Blog Post 1:

<div class="blog-post-container">
  <h1>My Blog Post Title About CSS</h1>
    <div class="blog-post-content" id="post-about-CSS"> 
      My blog post content for the post: My Blog Post Title About CSS, is contained here.
    </div>
</div>

Blog Post 2:

<div class="blog-post-container">
  <h1>My Blog Post Title About JS</h1>
    <div class="blog-post-content" id="post-about-JS"> 
      My blog post content for the post: My Blog Post Title About JS, is contained here.
    </div>
</div>

Say we are looking for Smart Copy to target the blog post body content across our blog. In this case, there are three potential CSS selectors to choose from:

Option 1: The tag div

Option 2: The class .blog-post-content

Option 3: The ID #post-about-CSS

Even though there are three CSS selectors to choose from, there’s one CSS selector that will work best. Let’s break down each option below:

Option 1: The tag div is too broad, as there are multiple divs in the source code — the div surrounding the blog post content: <div class=”blog-post-container”>, for example. In this instance, Smart Copy would find the first occurrence of “div” on the page and then select not only the blog post content, but also the <h1> containing the blog post title.

Option 2: The ID #post-about-CSS-selectors-content is too specific as if we look at the source code of the second blog post, the ID is different. We want to be able to select the blog post content in every blog post and not just in the first blog post.

Option 3: In this case, the class .blog-post-content is the best CSS selector because it exists on every div that only contains blog post content.

There may also be a time when you need to use a parent selector to target the correct feature.

If we refer to the example source code below, we can see that the HTML element <div> with the class .blog-post-content now contains two HTML elements, one <div> with author information that we don’t want to be included within the blog post content, and one <p>, paragraph, with the actual blog post content.

<div class="blog-post-container">
  <h1>My Blog Post Title About JS</h1>
    <div class="blog-post-content" id="post-about-JS"> 
      <div class="author-name">My author information </div> 
      <p>My blog post content for the post: My Blog Post Title About JS, is contained here.</p> 
    </div>
</div>

In this case, we can use .blog-post-content as the parent selector for the <p> tag containing the blog post content, using a combination of a class and tag selector to achieve our goal. In this case .blog-post-content p is a good CSS selector.

For best results, choose a selector that can target the feature on all blog posts, but at the same time is specific enough to target the exact feature that you’re looking to import.

Smart Copy will help you along the way by displaying the value that your CSS selector found. You can use this to confirm the accuracy of your selector:

Tips & Tricks for CSS Selectors with Smart Copy

When choosing a CSS selector for your blog’s author or publish date, you can target an element that includes a little more content than just the author’s name or publish date. In these cases, Smart Copy will strip out everything else (e.g., “Posted”, “Published on”, “by“, special characters, punctuation marks, etc.) and will only import the date or the author’s name.

Examples:
```
<div class="publish-date">Published on 06/05/2020</div>
```
The CSS selector div.publish-date will return 06/05/2020, even though the phrase "Published on" is also included in the same div.
```
<span id="author-name">Written by HubSpot</span>
```
The CSS selector span#author-name will return "HubSpot", even though the phrase "Written by" is also included in the same span.
When importing your blog post body, the Smart Copy tool won’t import any elements that have already been specified for other feature mappings (e.g. blog post title, or publish date). This does not apply to the featured image, which will still be included in your blog post body.

When targeting the featured image, you can specify an <img> tag, a <div> that contains the <img> tag within it, or a <div> that has the featured image specified as a background image within its style attribute.

Example:
```
<div id="banner-header" style="background-image: url('my-blog-image.jpg');">
 <h1 class="banner-title">Title</h1>
</div> 
```
The CSS selector div#banner-header will return the image my-blog-image.jpg.
If tags are listed as separate <a> elements, you can input a selector for the <ul>, <section>, or <div> that immediately surrounds these <a> elements, and the Smart Copy tool will know to identify these as separate tags.

Example:
```
<div class="blog-content blog-tags">
  <ul>
    <li><a>Marketing</a></li>
    <li><a>Sales</a></li>
    <li><a>CMS</a></li>
  </ul>
</div>
```
The CSS selector div.blog-tags or .blog-content ul will return the tags: Marketing, Sales and CMS.

Have further questions around finding selectors with Smart Copy, or having difficulties identifying the correct CSS selector? Leave a comment within the community post here to get more help.