# CssRule

Extends Model.extend(Styleable)

# Properties

# getAtRule

Returns the at-rule statement when exists, eg. @media (...), @keyframes

# Examples

const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
 atRuleType: 'media',
 atRuleParams: '(min-width: 500px)'
});
cssRule.getAtRule(); // "@media (min-width: 500px)"

Returns String (opens new window)

# selectorsToString

Return selectors of the rule as a string

# Parameters

# Examples

const cssRule = editor.Css.setRule('.class1:hover', { color: 'red' });
cssRule.selectorsToString(); // ".class1:hover"
cssRule.selectorsToString({ skipState: true }); // ".class1"

Returns String (opens new window)

# getDeclaration

Get declaration block (without the at-rule statement)

# Parameters

# Examples

const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
 atRuleType: 'media',
 atRuleParams: '(min-width: 500px)'
});
cssRule.getDeclaration() // ".class1{color:red;}"

Returns String (opens new window)

# getDevice

Get the Device the rule is related to.

# Examples

const device = rule.getDevice();
console.log(device?.getName());

Returns ([Device] | null)

# getState

Get the State the rule is related to.

# Examples

const state = rule.getState();
console.log(state?.getLabel());

Returns ([State] | null)

# getComponent

Returns the related Component (valid only for component-specific rules).

# Examples

const cmp = rule.getComponent();
console.log(cmp?.toHTML());

Returns ([Component] | null)

# toCSS

Return the CSS string of the rule

# Parameters

# Examples

const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
 atRuleType: 'media',
 atRuleParams: '(min-width: 500px)'
});
cssRule.toCSS() // "@media (min-width: 500px){.class1{color:red;}}"

Returns String (opens new window) CSS string