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.
Open the Developer Console in a Google Chrome browser — use the keyboard shortcut
J (on Windows) or
J (on Mac).
Click on the "Select an element in the page" tool
Click on the element in your webpage that you wish to inject your block beneath.
Right click on the dev tools element > Click "Copy" > then click "Copy selector".
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.
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)
Thankfully we can select elements that match a particular substring. The following code will match a class selector that starts with the substring
Target Dynamically Generated CSS Selector
[class^=navbar___] as your CSS Selector, you will now be able to target the dynamically generated selector
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.
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