CSSContainerRule
================

The **`CSSContainerRule`** interface represents a single CSS `@container` rule.

 An object of this type can be used to get the query conditions for the `@container`, along with the container name if one is defined.
 Note that the container name and query together define the "condition text", which can be obtained using `CSSConditionRule.conditionText`.

CSSRule

CSSGroupingRule

CSSConditionRule

CSSContainerRuleInstance properties
-------------------

*Inherits properties from its ancestors `CSSConditionRule`, `CSSGroupingRule`, and `CSSRule`.*

`CSSContainerRule.containerName` Read only 

Returns a string representing the name of an `@container`, or an empty string.

`CSSContainerRule.containerQuery` Read only 

Returns a string representing the set of features or "container conditions" that are evaluated to determine if the styles in the associated `@container` are applied.

Instance methods
----------------

*No specific methods; inherits methods from its ancestors `CSSConditionRule`, `CSSGroupingRule`, and `CSSRule`.*

Examples
--------

### Unnamed container rule

 The example below defines an unnamed `@container` rule, and displays the properties of the associated `CSSContainerRule`.
 The CSS is the same as in the `@container` example Setting styles based on a container's size.

The first part of the code simply creates a list for logging the container rule properties, along with a JavaScript `log()` method to simplify adding the properties.


```html
<div id="log">
  <h2>Log</h2>
  <ul></ul>
  <hr />
</div>
```



```js
// Store reference to log list
const logList = document.querySelector("#log ul");
// Function to log data from underlying source
function log(result) {
  const listItem = document.createElement("li");
  listItem.textContent = result;
  logList.appendChild(listItem);
}
```


Then we define the HTML for a `card` (`<div>`) contained within a `post`.


```html
<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>
```


 The CSS for the example is shown below.
 As described in the corresponding `@container` example, the CSS for the container element specifies the type of the container.
 The `@container` then applies a new width, font-size and background color to the card if the width is less than 650px.


```html
<style id="examplestyles">
 /\* A container context based on inline size \*/
 .post {
 container-type: inline-size;
 }

 /\* Apply styles if the container is narrower than 650px \*/
 @container (width < 650px) {
 .card {
 width: 50%;
 background-color: gray;
 font-size: 1em;
 }
 }
</style>
```


 The code below gets the `HTMLStyleElement` associated with the example using its id, and then uses its `sheet` property to get the `StyleSheet`.
 From the `StyleSheet` we get the set of `cssRules` added to the sheet.
 Since we added the `@container` as the second rule above, we can access the associated `CSSContainerRule` using the second entry, with index "1", in the `cssRules`.
 Last of all, we log the `containerName`, `containerQuery` and `conditionText` (inherited) properties.


```js
const exampleStylesheet = document.getElementById("examplestyles").sheet;
const exampleRules = exampleStylesheet.cssRules;
const containerRule = exampleRules[1]; // a CSSContainerRule representing the container rule.
log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
```


**Note:** The styles for this example are defined in an inline HTML `style` element with an id in order to make it easy for the code to find the correct sheet.
 You might also locate the correct sheets for each example from the document by indexing against the length (e.g. `document.styleSheets[document.styleSheets.length-1]` but that makes working out correct sheet for each example more complicated).


 The example output is shown below.
 The log section lists the `containerName`, which is an empty string as no name has been defined.
 The `containerQuery` and `conditionText` strings are also logged, and have the same value because there is no name defined.
 The card should change background and as the width of the page transitions through 650px.

### Named container rule

 The example below defines a named `@container` rule, and displays the properties of the associated `CSSContainerRule`.
 The CSS is very similar to that in the `@container` example Creating named container contexts.
```

<div id="log">
  <h2>Log</h2>
  <ul></ul>
  <hr />
</div>
```


```
// Store reference to log list
const logList = document.querySelector("#log ul");
// Function to log data from underlying source
function log(result) {
  const listItem = document.createElement("li");
  listItem.textContent = result;
  logList.appendChild(listItem);
}
```


First we define the HTML for a `card` (`<div>`) contained within a `post` (the example does not show the logging code, as this is the same as in the previous example).


```html
<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>
```


 As described in `@container`, the CSS for the container element specifies the type of the container, and may also specify a name for the container.
 The card has a default font size, which is overridden for the `@container` named `sidebar` if the minimum width is greater than 700px.


```html
<style id="examplestyles">
 .post {
 container-type: inline-size;
 container-name: sidebar;
 }

 /\* Default heading styles for the card title \*/
 .card h2 {
 font-size: 1em;
 }

 @container sidebar (min-width: 700px) {
 .card {
 font-size: 2em;
 }
 }
</style>
```


 The code for getting the sheet and rules is almost identical to the previous example.
 The only difference is that in this example we have three CSS rules, so to get the associated `CSSContainerRule` we get the third entry in the `cssRules`.


```js
const exampleStylesheet = document.getElementById("examplestyles").sheet;
const exampleRules = exampleStylesheet.cssRules;
const containerRule = exampleRules[2]; // a CSSContainerRule representing the container rule.
log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
```


 The example output is shown below.
 The log section lists the `containerName` and `containerQuery` strings.
 The `conditionText` is also logged, and shows the combination of these two strings.
 The title in the card section should double in size as the width of the page goes over 700px.

Specifications
--------------

| Specification |
| --- |
| CSS Containment Module Level 3 # the-csscontainerrule-interface |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.