You are here: Reference > JavaScript > client-side > style handling > properties > parentRule (rule)

parentRule property (rule)

A A

Font size

Browser support:

Returns a reference to the rule that contains the current rule object.

This property can be used for rules in a @media at-rule. In that case, it retrieves a rule object that represents the @media style rule. This property is rarely needed, because style rules are only accessible through their parent rules or style sheets.

Syntax:

object.parentRule;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

Reference to the parent rule.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the parentRule property:

<head>
    <style>
        @media all {
            H1 {
                color:#00aacc;
            }
        }
    </style>

    <script>
        function GetMediaRule () {
            // the first styleSheet object
            var styleSheet = document.styleSheets[0];

            if (styleSheet.cssRules) {
                // the @media rule
                var mediaRule = styleSheet.cssRules[0];

                // the H1 rule
                var h1Rule = mediaRule.cssRules[0];

                if (h1Rule.parentRule) {    // Firefox, Opera
                        // the @media rule, again
                    mediaRule = h1Rule.parentRule;
                    alert ("The media rule:\n" + mediaRule.cssText);
                }
                else {  // Safari
                    alert ("The media rule:\n" + mediaRule.cssText);
                }
            }
            else {  // Internet Explorer
                alert ("Your browser does not support this example!");
            }
        }
    </script> 
</head>
<body>
    <button onclick="GetMediaRule ()">Get the media rule with parentRule!</button>
</body>