CSSPageRule

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

CSSPageRule represents a single CSS @page rule.

CSSRule CSSGroupingRule CSSPageRule

Instance properties

Inherits properties from its ancestors CSSGroupingRule and CSSRule.

CSSPageRule.selectorText

Represents the text of the page selector associated with the at-rule.

CSSPageRule.style Read only

Returns the declaration block associated with the at-rule.

Instance methods

Inherits methods from its ancestors CSSGroupingRule and CSSRule.

Examples

Filtering for page rules

This example shows how you can find CSSPageRule objects for @page rules loaded by the document.

CSS

Below we define styles for the page using a @page rule.

css
@page {
  margin: 1cm;
}

JavaScript

The code iterates through all the sheets in the document, and through all the cssRules in each sheet, logging the sheet index, the number of rules, and the type of each rule object. We then detect CSSPageRule objects using their type (doing nothing with the information).

js
for (
  let sheetCount = 0;
  sheetCount < document.styleSheets.length;
  sheetCount++
) {
  const sheet = document.styleSheets[sheetCount].cssRules;
  log(`styleSheet: ${sheetCount}`);

  const myRules = document.styleSheets[sheetCount].cssRules;
  log(`rules: ${myRules.length}`);
  for (let i = 0; i < myRules.length; i++) {
    log(`rule: ${myRules[i]}`);
    if (myRules[i] instanceof CSSPageRule) {
      //... Do something with CSSPageRule
    }
  }
}

Results

The results are shown below. As you can see there are a two sheets, corresponding to this main document and the example code frame, and each have a number of rules, only one of which is our CSSPageRule.

Specifications

Specification
CSS Object Model (CSSOM)
# the-csspagerule-interface

Browser compatibility

BCD tables only load in the browser