All Collections
Policies
Policies that use CSS Selectors
Policies that use CSS Selectors

Set up Policies with CSS Selectors, Usage and Examples

Updated over a week ago

Article Navigation


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.


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. From the Monsido Domain Overview, click Select Domain. The Domain Overview page opens.

    The Content Policies section on the Policies page.

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

    The location of the Open button, on the same row as the domain.

    The Dashboard for the domain opens.

    The full dashboard view.

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

    The Global Policies Overview button on the top page menu bar.

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

    The Global Policies section of the Monsido Dashboard.

    The Global Policies page opens.

    The Add Policy button on the top right-hand corner of the window, below the two menu bars.

  4. Click Add new policy.

    The Add Policy button on the top right-hand corner of the window, below the two menu bars.

    The New Policy page opens.

    The New Policy creation pane.

  5. Click Create your own policy.

    The location of the Create Your Own Policy button on the left side of the pane.

    The New Policy creation page opens.

    The New Policy creation landing page.

  6. Click to select HTML pages.

    The location of the HTML Pages selection. This is usually the first policy template but can be in another position on the page.

  7. The New Policy configuration pane opens.

    The New Policy configuration pane.

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

    • Select Settings.

      The location of the Settings button on the upper left side of the pane.

    • Configure the settings.

      For more information, see the User Guide chapter:

      Note: Regular Expressions in source-code exclusions are not 100% compatible with Monsido 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.

        The location of the +Add Rule to Policy button, to the right of the Settings button on the left side of the pane.

      • 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.

The CSS Selector section of the New Rule page of Policy creation for Page HTML rule setup.

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

Note: These are separated with a comma and no space between the elements.

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

div p

Note: There is a space between div and p.

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

Note: The Browser Extension does not yet support CSS selectors and therefore does not take any user-defined CSS selectors into consideration when highlighting matches.

For more information, see the User Guide chapters:


Additional Resources

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

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

For further assistance, contact the Monsido support team at support@monsido.com or via the Monsido chat and help features inside the application.

Image of the toolbar with the Help Center buttons highlighted.

Contact us:

Monsido, Powered by CivicPlus

San Diego, CA, USA

5880 Oberlin Dr,
San Diego, CA 92121, USA

Australia & New Zealand

Suite 2.04
80 Cooper St
Surry Hills, NSW 2010

Copenhagen, Denmark

Borupvang 3
2750 Ballerup, Denmark

London, UK

14 New Street
London, EC2M 4HE

Did this answer your question?