---
title: "Policies that use CSS selectors"
date: "2021-11-02T12:01:21+00:00"
summary: "Learn how to set up and use policies with CSS selectors to automate website content standards and ensure compliance."
image:
type: "page"
url: "/web-governance/policies-use-css-selectors"
id: "4d494c03-d2a9-458d-9dd7-599a1b39cf3c"
---

Table of contents will be added

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

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

Basic policy setup
------------------

This section provides instructions on how to set up a basic policy. 

1.  Click **Global Policies Overview**, the button (mallet icon) on the top menu bar.
    
    ![The Global Policy Overview button on the top page menu bar.](https://acquia.widen.net/content/773c313e-353d-4f74-8968-823b4fd53480/web/WebGov_MainMenu-GlobalPolicyOverview.png)
    
    Alternatively, click on the header of the _Content Policies_ section.
    
    The _Global Policies_ page opens.
    
2.  Click **Add new policy**.
    
    ![The location of the Add New Policy button on the top right of the page in line with the page header.](https://acquia.widen.net/content/878672ed-926a-4686-848b-462ccc2ec8c9/web/WebGov_Policies-AddNewPolicyButton.png)
    
    The _New_ _Policy_ page opens.
    
3.  Click **Create your own policy**.
    
    ![The location of the Create Your Own Policy button on the New Policy configuration page.](https://acquia.widen.net/content/6d99049f-376f-4c83-ba71-aa10f45f851f/web/Mon_Policies-NewPolicy-CreateYourOwnPolicyButton.png)
    
    The _New Policy_ creation page opens.
    
4.  Click to select **HTML pages**.
    
    ![The location of the HTML Pages button on the Create New Policies page.](https://acquia.widen.net/content/312d93f2-c466-4a59-850e-15dfd7404470/web/Mon_Policies-CreateNew-HTMLPages.png)
    
5.  The _New Policy_ configuration pane opens.
    
    ![The new policy creation page as described in the document text.](https://acquia.widen.net/content/8c4bede8-ab15-4a31-bcf4-c11312b73338/web/Mon_Policies-NewPolicyCreationPage.png)
    
6.  From the options at the top of the panel on the left:
    *   Select **Settings.**
        
        ![The new policy creation page as described in the document text.](https://acquia.widen.net/content/8c4bede8-ab15-4a31-bcf4-c11312b73338/web/Mon_Policies-NewPolicyCreationPage.png)
        
    *   Configure the settings.
        
        For more information, visit [Create a custom policy](https://docs.acquia.com/node/58751).
        
        Note
        
        Regular Expressions in source-code exclusions are not 100% compatible with the Web Governance Policies feature. 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 on the top left side of the page.](https://acquia.widen.net/content/265ab2ee-9a94-4e38-912a-321acb49b3e7/web/Mon_Policies-NewPolicy-AddRuleToThePolicyButton.png)
            
        *   **Limit or exclude**: Add CSS selectors, instructions below, to either limit the search within those values or exclude the snippets with the given inputs. 
        *   **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.](https://acquia.widen.net/content/97471c14-7373-45d0-8514-7dd436e253cd/web/Mon_Policies-Rule-CSSSelectorSection.png)

### 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 there is  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_.

Additional resources
--------------------

For a full list of CSS Selectors, visit [CSS Selector Reference](https://www.w3schools.com/cssref/css_selectors.asp).

Note

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

For more information, visit [Create a custom policy](https://docs.acquia.com/node/58751).