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
indexOptional-
An optional index at which to insert the rule; defaults to 0.
Return value
The index of the new rule.
Exceptions
IndexSizeErrorDOMException-
Thrown if index is greater than the number of child CSS rules.
HierarchyRequestErrorDOMException-
Thrown if
rulecannot be inserted at the specified index due to some CSS constraint. HierarchyRequestErrorDOMException-
Thrown if the
ruleis 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
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
insertRule
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support