rule-list

Syntax

A <rule-list> is defined as a sequence of zero or more:

• Style rules (e.g., p { color: red; }).
• Qualified at-rules (e.g., @media (width < 600px) { ... }).
• Ignored statements (e.g., parse errors handled by the parser, which the parser automatically skips).

All whitespace, comments, and invalid or malformed constructs are handled according to the CSS parser rules.

Description

The <rule-list> type appears in the specification anywhere CSS is defined to contain a "list of rules."

Examples include:

• The top level of a stylesheet.
• The body of grouping at-rules like @media, @custom-media, @supports, @layer, @container.
• The contents of nesting selectors (CSS Nesting).

Although authors cannot explicitly write <rule-list>, understanding it is crucial when interpreting how CSS parses nested structures, how invalid rules are dropped, and how the cascade forms within conditional blocks.

Examples

A <rule-list> in a stylesheet

The following stylesheet is treated as a <rule-list> containing two style rules and an at-rule.

p {
  margin: 0;
}

h1 {
  font-size: 2rem;
}

@media (width < 600px) {
  body {
    background: lightgray;
  }
}

A <rule-list> inside @media at-rule

The block contained inside an @media at-rule is a <rule-list> containing one or more style rules. The following example contains two style rules.

@media (prefers-color-scheme: dark) {
  main {
    background: black;
    color: white;
  }

  a {
    color: skyblue;
  }
}

Invalid rules inside a <rule-list>

The invalid token sequence (!invalid-rule) is ignored by the parser. The rest of the rules form a valid <rule-list>.

body {
  color: black;
}

!invalid-rule

@supports (display: grid) {
  section {
    display: grid;
  }
}

Specifications

See also

• CSS @supports at-rule
• CSS @media at-rule
• CSS @custom-media at-rule