Content can be styled depending on the CSS Region it flows into. It is an extension of pseudo-element styling such as ::first-line which applies a particular style to a fragment of content. With CSS Region styling, additional selectors may apply depending on the CSS Region into which content flows.

In our example, the designer wants to make text flowing into #region1 dark blue and bold.

<style>
  #region1::region p {
    color: #0C3D5F;
    font-weight: bold;
  }
</style>

The ::region pseudo-element is followed by a p relative selector in this example. The color and font-weight declarations will apply to any fragments of paragraphs that are displayed in #region1. The following figure shows how the rendering changes if we apply this styling specific to #region1. Note how less text fits into this box now that the 'font-weight' is bold instead of normal.

The ::region pseudo-element

A ::region pseudo-element represents a relationship between a selector that matches a CSS Region, and a relative selector that matches some named flow content. This allows style declarations to be applied to fragments of named flow content flowing into particular regions.

When the ::region pseudo-element is appended to a selector that matches one or more CSS Regions, this creates a 'flow fragment' selector. The flow fragment selector specifies which range of elements in the flow can be matched by the relative selector. The relative selector can match elements in the range(s) (see [[!DOM]]) of the named flow that are displayed fully or partially in the selected region(s).

Elements that are fully or partially in the flow fragment range may match the relative selector. However, the style declarations only apply to the fragment of the element that is displayed in the corresponding region(s).

In the following example, the named flow 'article-flow' flows into 'region-1' and 'region-2'.

<style>
  #div-1 {
    flow-into: article-flow;
  }

  #region-1, #region-2 {
    flow-from: article-flow;
  }

  /* region styling */
  #region-1::region p  {
    margin-right: 5em;
  }
</style>     

<body>
  <div id="div-1">
      <p id="p-1">...</p>
      <p id="p-2">...</p>
  </div>
  <div id="region-1"></div>
  <div id="region-2"></div>
</body>

Example showing how a named flow content fits into regions to illustrate region styling.

The region styling applies to flow content that fits in 'region-1'. The relative selector matches 'p-1' and 'p-2' because these paragraphs flow into 'region-1'. Only the fragment of 'p-2' that flows into 'region-1' is styled with the pseudo-element.

All of the selectors in a ::region pseudo-element contribute to its specificity. So the specificity of the ::region pseudo-element in the example above would combine the id selector's specificity with the specificity of the type selector, resulting in a specificity of 101.

Selectors that match a given element or element fragment (as described above), participate in the CSS Cascading order as defined in [[!CSS21]].

Region styling does not apply to nested regions. For example, if a region 'A' receives content from a flow that contains region 'B', the content that flows into 'B' does not receive the region styling specified for region 'A'.

The getComputedRegionStyle methods on the Region interface work the same as the getComputedStyle [[!CSSOM]] methods on the Window interface [[!HTML5]] with the following exceptions. For the Region interface the CSSStyleDeclaration returned must include the result of region styling. If the element is fragmented across region boundaries, the CSSStyleDeclaration returned must apply only to the fragment that flows through the CSS Region. The method returns null if the region object is not (or no longer) a region.

Note

If the element is not contained in the CSS Region at all, the method returns the region styling that would apply to the element if it were contained in the CSS Region (following how getComputedStyle works with elements not contained in the window's document).

CSS Region names and styling

The ::region pseudo-element