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

## SelectorManager

Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To get better this concept let's take
a look at this code:

```css
span > #send-btn.btn{
 ...
}
```

```html
<span>
  <button id="send-btn" class="btn"></button>
</span>
```

In this scenario we get:
span     -> selector of type `tag`
send-btn -> selector of type `id`
btn      -> selector of type `class`

So, for example, being `btn` the same class entity it'll be easier to refactor and track things.

Before using methods you should get first the module from the editor instance, in this way:

```js
var selectorManager = editor.SelectorManager;
```

### Parameters

-   `config` **[Object][1]** Configurations
    -   `config.selectors` **[Array][2]&lt;[Object][1]>** Default selectors (optional, default `[]`)
    -   `config.states` **[Array][2]&lt;[Object][1]>** Default states (optional, default `[]`)
    -   `config.label` **[String][3]** Classes label (optional, default `'Classes'`)
    -   `config.statesLabel` **[String][3]** The empty state label (optional, default `'- State -'`)

### Examples

```javascript
...
{
 selectors: [
   {name:'myselector1'},
    ...
 ],
 states: [{
   name: 'hover', label: 'Hover'
 },{
   name: 'active', label: 'Click'
 }],
 statesLabel: '- Selecte State -',
}
```

Returns **this** 

## add

Add a new selector to collection if it's not already exists. Class type is a default one

### Parameters

-   `name` **[String][3]** Selector name
-   `opts` **[Object][1]** Selector options (optional, default `{}`)
    -   `opts.label` **[String][3]** Label for the selector, if it's not provided the label will be the same as the name (optional, default `''`)
    -   `opts.type` **[String][3]** Type of the selector. At the moment, only 'class' (1) is available (optional, default `1`)

### Examples

```javascript
var selector = selectorManager.add('selectorName');
// Same as
var selector = selectorManager.add('selectorName', {
  type: 1,
  label: 'selectorName'
});
```

Returns **Model** 

## addClass

Add class selectors

### Parameters

-   `classes` **([Array][2] \| [string][3])** Array or string of classes

### Examples

```javascript
sm.addClass('class1');
sm.addClass('class1 class2');
sm.addClass(['class1', 'class2']);
// -> [SelectorObject, ...]
```

Returns **[Array][2]** Array of added selectors

## get

Get the selector by its name

### Parameters

-   `name` **[String][3]** Selector name
-   `type`   (optional, default `Selector.TYPE_CLASS`)
-   `tyoe` **[String][3]** Selector type

### Examples

```javascript
var selector = selectorManager.get('selectorName');
```

Returns **(Model | null)** 

## getAll

Get all selectors

Returns **Collection** 

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

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

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