This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.



Applies CSS styles to portions of content as it appears when flowing within a specified set of regions.

The basic syntax is as follows:

 @region <region_selector> {
     <content_selector> {
         /* ... CSS properties ... */

The region_selector specifies a set of region elements. Within that scope, the content_selector applies to any range (or ‘fragment’) of the selected content when it appears within each region. This example produces the following result:

 /* default paragraph text */
 p { color: gray: }

 /* customized for fragments that appear within region */
 @region-style #intro {
     p { color: blue; }



Inverts paragraph text within the first region

/* dark gray text color by default */
p {
    color: #444;

/* dark gray background for first region */
div.region:first-of-type {
    background-color: #444;

/* white text only within first region */
@region div.region:first-of-type {
    p {
        color: #fff;

/* associate content with CSS regions */
article.content { flow-into: main; }
div.region { flow-from: main; }


 The @region rule does not change the cascading order of content selectors.

Use the CSSRegionStyleRule interface to apply @region rules programmatically.


Only the following set of CSS properties work within @region rules:

Related specifications

CSS Regions Module Level 1
W3C Working Draft 23 August 2012

See also

Related articles


External resources