All Collections
PageAssist
PageAssist and CSS Selectors
PageAssist and CSS Selectors
How to use CSS Selectors with PageAssist
Faith George avatar
Written by Faith George
Updated over a week ago

Table of Contents:


Introduction

This document gives instructions on how to fill in the CSS Selector fields during PageAssist setup. See PageAssist for full instructions on the module.


CSS Selector Basics

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.

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


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 directly a child of the specified parent are not selected.

For example, ul > li selects the li’s 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 our case, this 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.

You can read more on how to use it in the section “The form” -> “Navigation”


Custom Monsido selectors

Monsido has 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 information

External resources:

For more information about CSS selectors with examples, see:

Monsido resources:

For more information, see the User Guide chapters:

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 Dashboard with the Help Center buttons highlighted.

See Monsido for Developers for documentation and advanced help files for developers.

Contact us

Monsido, an Optimere brand:

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?