How to Select Subpages in CSS
Charlene Abranilla avatar
Written by Charlene Abranilla
Updated over a week ago

You can use a selector like [id^='page-members'] or #parent-page__members

In this example there is a database page called members with pages in it.

The first selector will select any page with the id that begins with page-members - this will include the members gallery

The second one will select any page that is a subpage of the members page - this will only select subpages of the members page

Example One

Just say you want to format callouts on the members page. Here is the general code for that.

.notion-callout {
color: red !important;
}

To make this code only apply on the members page, add the ID tag.

[id^='page-members'] .notion-callout {
color: red !important;
}

Example Two

If you would like to target all the subpages of members page, then:

#parent-page__members .notion-callout {
color: red !important;
}
Did this answer your question?