Appropriate CSS syntax for an element with Multiple ID's or Classes

Question

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.

Don't ever apply multiple ID's to an element... ID's are by definition supposed to be unique and having multiple will be invalid HTML. — Blunderfest, Jul 13 '16 at 12:49
@Blunderfest That's not exactly correct. IDs are supposed to be unique, which means you can't use *the same ID* later on in the document. You can certainly have multiple IDs per element so long as you don't share them in the same `id` attribute as a space delimited list. See http://stackoverflow.com/a/5685221/2756409 — TylerH, Jul 13 '16 at 13:00
@TylerH Ummm... no. http://stackoverflow.com/a/192066/1174118, "there can only be a single attribute of type ID per element" You're looking at the css selector specification. Not the HTML ID specification. — Blunderfest, Jul 13 '16 at 13:03
But I need multiple class selectors in one custom ID selector... I am overwriting Bootstrap Modal in just one template... Look at the Custom Css selector I wrote — user2402107, Jul 13 '16 at 13:04
@Blunderfest Ummm... yes. Did you read the whole answer and ensuing comments? First, do that. Then, note that the accepted answer you linked is for the XHTML spec, not the HTML spec. The latest [HTML](https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute) spec explicitly allows for the opportunity for multiple ID attributes: `"This specification doesn't preclude an element having multiple IDs, if other mechanisms (e.g. DOM Core methods) can set an element's ID in a way that doesn't conflict with the id attribute."` — TylerH, Jul 13 '16 at 13:07
@Blunderfest It isn't, and shouldn't be, common, but my point is just to note that "don't ever apply multiple IDs to an element" is not technically correct and so can be dangerous to go around saying. — TylerH, Jul 13 '16 at 13:10
@user2402107 Do you mean you need to nest class selectors in an ID selector? E.g. `#idselector .class1 .class2`? — TylerH, Jul 13 '16 at 13:11
@TylerH Fair enough, I have now read all related comments to the post. However, I still think that "Don't every apply multiple ID's to an element" is a fair rule to live by considering `if other mechanisms (e.g. DOM Core methods) can set an element's ID in a way that doesn't conflict with the id attribute` to me, means that declaratively you cannot set multiple ID's on an element, right? — Blunderfest, Jul 13 '16 at 13:13
@Blunderfest If by "declaratively" you mean "when typing out your HTML document to begin with" then sort of, yes, that's true. You can still declare more by injecting them or by using an `xml:ID` attribute (which is still just an "ID" attribute, basically), so long as the attribute is defined as type ID. — TylerH, Jul 13 '16 at 13:30

Johannes · Answer 1 · 2016-07-13T13:04:01.310

0

To apply multiple classes to an element just write it like this (i.e. without comma):

<div class="class1 class2 class3">...</div>

To mix classes with an ID, write

<div id="element1" class="class3 class4">...</div>

edited Jul 13 '16 at 13:04

answered Jul 13 '16 at 12:48

Johannes

64,305
18
73
130

score 0 · Answer 2 · answered Jul 13 '16 at 12:51

Out of general good coding habits, it's always better to apply css on an element with classes like so:

.red{
     background-color: red;
}
.outline{
     border: 2px #000 solid;
}

<div class="red outline"></div>

The classes in the element are separated with spaces and the last one is the most important class (can override some css properties if needed)

The main goal of this is to make sure you code is sustainable, if you want to add a new element with the same properties to your page, you don't need to re-write some css.

About IDs:

Use only one ID on an element, it should only need one, and this id should be unique throughout the document, this will be more important than css properties given with class.

I also recommend this article to further your knowledge on the matter.

Enjoy front-end!

Well if you need to select only one modal, you can either give it a new class name like `customModal` or an id and use that insteal of `modal {}` in the css — RDardelet, Jul 13 '16 at 13:30

Appropriate CSS syntax for an element with Multiple ID's or Classes

2 Answers2