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

## CssRule

**Extends StyleableModel**

### 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]**

### 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]**

### 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]**

### getDevice

Get the Device the rule is related to.

#### Examples

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

Returns **([Device] | null)**

### getState

Get the State the rule is related to.

#### Examples

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

Returns **([State] | null)**

### getComponent

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

#### Examples

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

Returns **([Component] | null)**

### 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