Breadcrumbs

Restrict CSS styles to specific article pages

Sometimes it is necessary to change the CSS styling for specific article pages only. Using the Confluence content ID, you can control on which pages exactly your styles apply.

You can get the Confluence content ID using one of the following methods:

  • Navigate to the desired page inside Confluence and copy the id from the URL
    Example URL: /pages/123456789/My+page+title

  • Use your browser’s developer tools to inspect your page’s source. The page id is set right on the html element at the very top of your site’s source.
    Example: <html data-confluence-content-id="123456789">...</html>

Using your content ID, you can restrict the scope of your styles.

Example:

CSS
/* Changing the site’s header on a specific page */
:root[data-confluence-content-id="{YOUR_ID}"] {
  --theme-header-background-color: cornflowerblue;
}