You are here: Reference > JavaScript > client-side > style handling > properties > pseudoClass (CSSPageRule, page)

pseudoClass property (CSSPageRule, page)

Browser support:
Returns the name of the pseudo class associated with the @page at-rule.
Although the page object is supported, but the @page at-rule does not work in Internet Explorer before version 8.
In Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9, use the CSSPageRule object instead.

Syntax:

object.pseudoClass;
You can find the related objects in the Supported by objects section below.
This property is read-only.

Possible values:

String that represents the name of the pseudo class.
One of the following values:
first
Rule applies to the first page in the collection.
left
Rule applies to pages on the left side of the binding verso pages.
right
Rule applies to pages on the right side of the binding recto pages.
Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the pseudoClass property:
<head>
    <style id="myStyle">
        @page :first {
            margin-left: 13cm;
            margin-right: 4cm;
        }
    </style> 

    <script type="text/javascript">
        function GetPageRule () {
            var styleTag = document.getElementById ("myStyle");

                // the style sheet in the style tag
            var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;

            if (sheet.cssRules) { // all browsers, except IE before version 9
                    // the page rules are not in the cssRules collection
                    // in Firefox and Safari before version 5
                if (sheet.cssRules.length > 0) {
                    var pageRule = sheet.cssRules[0];
                    alert (pageRule.cssText);
                    return;
                }
            }
            else {  // Internet Explorer before version 9
                if (sheet.pages) {
                    var pageRule = sheet.pages[0];
                    alert (pageRule.selector + ":" + pageRule.pseudoClass);
                    return;
                }
            }

                // Firefox, Safari before version 5
            alert ("Your browser does not support this example!");
        }
    </script> 
</head>
<body>
    <button onclick="GetPageRule ()">Get the page rule!</button>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content