CSSGroupingRule: insertRule() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

The insertRule() method of the CSSGroupingRule interface adds a new CSS rule to a list of CSS rules.

Syntax

js

insertRule(rule)
insertRule(rule, index)

Parameters

rule: A string
index Optional: An optional index at which to insert the rule; defaults to 0.

Return value

The index of the new rule.

Exceptions

IndexSizeError DOMException: Thrown if index is greater than the number of child CSS rules.
HierarchyRequestError DOMException: Thrown if rule cannot be inserted at the specified index due to some CSS constraint.
HierarchyRequestError DOMException: Thrown if the rule is a valid statement but not a nested statement.

Examples

js

let myRules = document.styleSheets[0].cssRules;
myRules[0].insertRule(
  "html {background-color: blue;}",
  0,
); /* inserts a rule for the HTML element at position 0 */

Specifications

Specification
CSS Object Model (CSSOM) # dom-cssgroupingrule-insertrule

Browser compatibility