<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## CssRule

**Extends StyleableModel**

### Parameters

*   `props` **CssRuleProperties**&#x20;
*   `opt` **any**  (optional, default `{}`)

### Properties

*   `selectors` **[Array][1]\<Selector>** Array of selectors
*   `style` **[Object][2]** Object containing style definitions
*   `selectorsAdd` **[String][3]?** Additional string css selectors
*   `atRuleType` **[String][3]?** Type of at-rule, eg. `media`, 'font-face'
*   `mediaText` **[String][3]?** At-rule value, eg. `(max-width: 1000px)`
*   `singleAtRule` **[Boolean][4]?** This property is used only on at-rules, like 'page' or 'font-face', where the block containes only style declarations
*   `state` **[String][3]?** State of the rule, eg: `hover`, `focused`
*   `important` **([Boolean][4] | [Array][1]<[String][3]>)?** If true, sets `!important` on all properties. You can also pass an array to specify properties on which use important
*   `stylable` **[Boolean][4]?** Indicates if the rule is stylable from the editor[Device]: device.html[State]: state.html[Component]: component.html

### getAtRule

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

#### Examples

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

Returns **[String][3]**&#x20;

### selectorsToString

Return selectors of the rule as a string

#### Parameters

*   `opts` **[Object][2]?** Options (optional, default `{}`)

    *   `opts.skipState` **[Boolean][4]?** Skip state from the result

#### Examples

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

Returns **[String][3]**&#x20;

### getDeclaration

Get declaration block (without the at-rule statement)

#### Parameters

*   `opts` **[Object][2]** Options (same as in `selectorsToString`) (optional, default `{}`)

#### Examples

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

Returns **[String][3]**&#x20;

### getDevice

Get the Device the rule is related to.

#### Examples

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

Returns **([Device] | null)**&#x20;

### getState

Get the State the rule is related to.

#### Examples

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

Returns **([State] | null)**&#x20;

### getComponent

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

#### Examples

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

Returns **([Component] | null)**&#x20;

### toCSS

Return the CSS string of the rule

#### Parameters

*   `opts` **[Object][2]** Options (same as in `getDeclaration`) (optional, default `{}`)

#### Examples

```javascript
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][3]** CSS string

[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array

[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean