---
title: "PageAssist setup with CSS selectors"
date: "2021-12-29T11:52:00+00:00"
summary: "Learn how to set up PageAssist using CSS selectors. Master element, ID, class, and custom selectors for precise HTML parsing."
image:
type: "page"
url: "/web-governance/pageassist-setup-css-selectors"
id: "26faddbf-1114-425f-a69b-6b5a3345a31e"
---

Introduction
------------

Selectors are most often used in CSS to target specific HTML elements on web pages that you want to style.

In this instance, they are used for parsing the HTML on the homepage. There are a wide variety of CSS selectors available, which allows for fine-grained precision when selecting elements to style.

Note

The selector will match ALL instances of the target HTML elements.

This document provides instructions on how to fill in the CSS Selector fields during PageAssist setup.

Element selector
----------------

The element selector selects elements based on their element name. For example, to select all `<p>` elements on a page, use the selector:

`**p**`

CSS element > element Selector

Use the element > element selector to select elements with a specific parent.

Note

Elements that are not a direct child of the specified parent are not selected. For example, 

    ul > li 

selects the **li** element that is placed just after the `**ul**` in the code.

ID selector
-----------

The ID selector uses the id attribute of an HTML element to select a specific element.

The ID of an element _**should**_ be unique within a page, so the ID selector can be used to select one unique element.

To select an element with a specific ID, write a hash # character, followed by the ID of the element.

The style rule below is applied to the HTML element with `id="para1"`

     #para1

Class selector
--------------

The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period . character, followed by the name of the class.

In the example below, all HTML elements with `class="center"` are selected using this selector:

     .center

It is also possible to indicate that only specific HTML elements should be affected by a class.

The example below indicates only `<p>` elements with `class="center"` use the selector:

     p.center

HTML elements can also refer to more than one class.

In the example below, the `<p>` element is selected with both _center_ and _large_ as classes `class="center large"` . Use this selector:

     p.center.large

CSS :nth-child() selector
-------------------------

The `:nth-child(n)` selector matches every element that is the `nth` child, regardless of its parent type. `n` can be a number, a keyword, or a formula. In this example, is will typically be set to match by number.

The selector below will select the 2nd `p` element in this example:

    <p>Paragraph 1</p>
    <p>Paragraph 2</p> 
    <p>Paragraph 3</p> 

Selector:

     p:nth-child(2)

CSS :mon-parent selector
------------------------

Takes the parent element of the selected element.

Custom selectors
----------------

We have created a series of custom CSS selectors that do _**NOT**_ exist in normal CSS and only in the PageAssist system.

CSS :mon-next selector
----------------------

Allows you to select the next element on the same level.

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

**External resources**:

For more information about CSS selectors with examples, see:

*   [Mozilla guide](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors)

For instructions, visit [PageAssist setup](https://docs.acquia.com/acquia-optimize/pageassist-setup).