Search through help articles on every aspect of Proof products

Megan Johnson
Written by Megan Johnson

Choose a location to inject content by targeting a specific CSS selector


When injecting a block on your website, Proof uses CSS selectors to determine a specific location on your website for injecting a block.

In some cases the default content positioning feature will not work to inject your block after the right website element. In these cases you will need to manually build a CSS selector.

How to choose the right CSS selector to position your block

First open the 'Edit CSS Selectors' feature . Here you can enter a specific selector that you would like to target. Your blocks will be injected immediately after or before the website element specified by the selector. You can learn more about CSS selectors here.

Step 1

Open the Developer Console in a Google Chrome browser — use the keyboard shortcut Cmd Shift J (on Windows) or Cmd Option J (on Mac).

Step 2

Click on the "Select an element in the page" tool

Step 3

Click on the element in your webpage that you wish to inject your block beneath.

Step 4

Right click on the dev tools element > Click "Copy" > then click "Copy selector".

Step 5

Go back to the CSS Selector popup in the Proof Visual Editor. Now paste the CSS selector value from Step 4 into the input field.

Target dynamically generated CSS classes

CSS selectors are used to identify specific elements on your website. Some selectors are auto-generated – which means that the selector changes every time a user accesses your webpage. You can build a custom CSS selector using a wildcard so that it ignores the auto-generated piece of the selector.

###Example

You may have a dynamically generated selector similar to the one below. The 98N20 part in the example is auto-generated each time a user accesses your webpage. We will want to ignore this part of the selector using a wildcard since it changes so often.

CSS Selector (Dynamically Generated)

.navbar___98N20

Thankfully we can select elements that match a particular substring. The following code will match a class selector that starts with the substring navbar___.

Target Dynamically Generated CSS Selector

[class^=navbar___]

By setting [class^=navbar___] as your CSS Selector, you will now be able to target the dynamically generated selector .navbar___98N20.

Resources

Here are 3 character sequences that are helpful for targeting specific substrings for your dynamically generated CSS selectors.

####^=

matches when the substring sits at the beginning of the string.

$=

matches when the substring sits at the end of the string.

*=

matches when the substring is present at any position within the string.

See more selector examples

Not Working?

If you're still having trouble targeting a selector, please read through the following common issues.

##Id based selectors should not start with a number

id based selectors (e.g. #my-special-div-id) are not allowed to start with a number (e.g. #9-broken-id-selector). Learn More

Categories: