W3cubDocs

/Web APIs

CSSGroupingRule: insertRule() method

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, due to constraints specified by CSS, the new rule cannot be inserted into the list at the (zero-index) index position given.

InvalidStateError DOMException

Thrown if the new rule is an @namespace at-rule, and the list of child CSS rules contains anything other than @import at-rules and @namespace at-rules.

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

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
insertRule 45 12 20 No 32 3 45 45 20 32 2 5.0

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSSGroupingRule/insertRule