This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

CSSRegionStyleRule

Summary

Represents an @region rule in a CSS style sheet, which applies styles to fragments of content that flow into a CSS region.

Inherits from CSSRuleCSSRule

Properties

No properties.

Methods

No methods.

Events

No events.

Inherited from CSSRule

Properties

cssText
Gets or sets a textual representation of a CSS rule.

parentStyleSheet
:

type
:

Methods

No methods.

Events

No events.

Examples

Starting with this CSS…

@region div.region {
    p {
    color: #fff;
        background-color: #000;
    }
}

Narrow the scope of the first rule within the @region to the first paragraph, and modify its background color

// corresponds to @region rule above:
rule = document.styleSheets[0].cssRules[0];

// modify first nested style's selector:
rule.cssRules[0].selectorText = 'article > p:first-of-type';

// modify first nested style's background-color property:
rule.cssRules[0].style.backgroundColor = '#777';

// inspect first nested style as read-only string:
console.log(rule.cssRules[0].cssText);

// inspect CSS syntax for entire @region rule:
console.log(rule.cssText);

The cssText above now dynamically reflects these altered values:

@region div.region {
    p:first-of-type {
    color: #fff;
        background-color: #777;
    }
}

Related specifications

CSS Regions Module Level 1
W3C Working Draft 23 August 2012

See also

Related articles

Regions

External resources