Policies that use CSS selectors

This article gives instructions on how to set up and use policies based on CSS selectors.

Introduction¶

Automate and standardize website content policies and ensure compliance to brand, legal, style, and regulatory standards.

CSS (Cascading Style Sheet) is a stylesheet language that is used to control the format and/or layout of web documents and pages.

CSS Selectors are expressions that are used to target specific HTML elements to style on a website. Use CSS selectors to improve policy definition, limit searches, and/or exclude content in a policy efficiently. After they are set up, CSS selectors can be used to select elements. In other words, selectors are patterns that are used to select the element(s) to style.

Configure a new policy and specify certain CSS selectors, or patterns of elements, to flag. The browser searches for or excludes the CSS properties only within the targeted HTML elements.

Video Resource¶

For a video that explains policies and CSS selectors, see the following:

• Policies: CSS Selectors (Video)

Basic Policy Setup¶

This section gives instructions on how to set up a basic policy. Skip to CSS Selectors if you have done this part already.

1. Click Select Domain. from the Acquia Optimize Domain Overview page. The Domain Overview page opens.

   

2. Click Open on the same row as the domain name. 
   ​

   

   The Dashboard for the domain opens.

   

3. Click Global Policies Overview, the button (mallet icon) on the top menu bar.

   

   Alternatively, click on the header of the Content Policies section.

   

   The Global Policies page opens.

   

4. Click Add new policy.

   

   The New Policy page opens.

   

5. Click Create your own policy.

   

   The New Policy creation page opens.

   

6. Click to select HTML pages.

   

7. The New Policy configuration pane opens.

   
8. From the options at the top of the pane:

   • Select Settings.
     ​

     

   • Configure the settings.

     For more information, see the User Guide chapter:

     Configure Policies.

      

     Note

     Regular Expressions in source-code exclusions are not 100% compatible with Acquia Optimize Policies. The languages are different (Java and Ruby).

      

     • Select +Add rule to policy: Click to add a rule to the policy. The rules selection list opens.

       
     • Limit or exclude: Add CSS selectors to either limit the search within those values or exclude the snippets with the given inputs. Skip to CSS Selectors for detailed instructions.

     • Save the changes. A dialog box opens.

       In the dialog box, enter the policy Name (required) and Note if needed and then click Save.

• From the options at the top of the page, select +Add rule to the policy. Repeat the steps above to add as many rules as needed.
• Click Save. The Policy List is open and the new policy is present. A Policy scan begins automatically.

CSS Selectors¶

Enter the CSS selector in the Policy Creation steps, when it is requested.

Examples¶

To locate all elements with the class intro, use the .class CSS selector:

.intro

To locate all elements with the id aero1, use the #id CSS selector:

#aero1

To locate all <h2> elements, use the element CSS Selector example:

h2

To locate all <h2> and <a> elements, use:

h2,a

To locate all <p> elements inside <div> elements, use:

div p

For a full list of CSS Selectors, see the external site:

CSS Selector Reference.

For more information, see the User Guide chapters:

• Configure Policies.

Additional Resources¶

For more information about the topics covered in this chapter, see the User Guide articles:

• Configure Policies
• Policies: Pre-made
• Policies: Links
• Policies: Titles
• Policies: Placeholder text
• Policies: U.S. Telephone Numbers.

See Acquia Optimize for Developers for documentation and advanced help files including SDK information for developers.