So I am relatively new to front-end development, and I am going back and cleaning up a bunch of my code which has a lot of in-line styling. What I am trying to figure out is the appropriate way to apply multiple CSS class selectors, or ID selector to a single HTML element. I attempted at creating a single class selector. What is the correct way of applying multiple classes or ID's to a single element... Please note that that they need to be separate in CSS as they have dofferent properties. 

**Custom Class Selector:** 

```
#customModal .modal-open .modal{
    overflow: visible;
}
#customModalDialog .modal-dialog{
    position: fixed;
    left: 60%;
}

```

**Example CSS:**

```
<style>
    .modal-open .modal {
        overflow: visible
    }

    .modal-dialog {
        position: fixed;
        left: 60%;

    }
</style>

```

**HTML to be applied to:**

```
<div class=" bg-white" modaldraggable>
    <form name="_form" class="form-horizontal" ng-submit="submit(_form)">
        <div class="modal-header">
            <div class="modal-title">{{alert_data.title}}</div>
        </div>
        <div class="modal-body" style="height: 319px">
            <iframe ng-src="{{ alert_data.url }}" width="100%" height="100%" frameborder="0"></iframe>
        </div>
        <div class="modal-footer">
            <button class="btn btn-info btn-xs" ng-click="cancel()">Ok</button>
        </div>
    </form>
</div>

```

\*\*\*\*\*\*\*\*\* Note\*\*

I am trying to overwrite a bootstrap class selector for a very unique template... by doing .modal{} in main.css I would overwrite them all... thats why I need a custom selector to handle both.