CSSRegionStyleRule

Jump to: navigation, search

CSSRegionStyleRule

This article is Ready to Use.

W3C Working Draft

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 CSSRule

Properties

No properties.

Methods

No methods.

Events

No events.

Inherited from CSSRule

Properties

API Name Summary
parentRule
parentStyleSheet
type

Methods

No methods.

Events

No events.

Examples

Starting with this CSS...

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

JavaScript

// 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:

CSS

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



Related specifications

Specification Status Related Changes
CSS Regions Module Level 1 W3C Working Draft 23 August 2012

See also

Related articles

Regions

  • CSSRegionStyleRule













External resources