< css‎ | atrules
Jump to: navigation, search


This article is Ready to Use.

W3C Working Draft


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

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

See also

Related articles


External resources