CSSRegionStyleRule
Summary
Represents an @region rule in a CSS style sheet, which applies styles to fragments of content that flow into a CSS region.
Properties
No properties.
Methods
No methods.
Events
No events.
Inherited from CSSRule
Properties
- cssText
- Gets or sets a textual representation of a CSS rule.
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
CSSRegionStyleRule
External resources
- W3C editor’s draft: CSS Regions Module Level 3
- Adobe Web Standards: CSS Regions
- Adobe Developer’s Network: CSS3 Regions: Rich page layout with HTML and CSS3
- Sample pages