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
cssText Gets or sets a textual representation of a CSS rule.
parentRule
parentStyleSheet
type

Methods

No methods.

Events

No events.


Compatibility

There is no data available for topic "webapi", feature "CSSRegionStyleRule". If you think that there should be data available, consider opening an issue.

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