How to Combine Class and Id in CSS Selector

How to combine class and ID in CSS selector?

In your stylesheet:

div#content.myClass

Edit: These might help, too:

div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */

and, per your example:

div#content.sectionA

Edit, 4 years later: Since this is super old and people keep finding it: don't use the tagNames in your selectors. #content.myClass is faster than div#content.myClass because the tagName adds a filtering step that you don't need. Use tagNames in selectors only where you must!

Combining a Class selector with an ID

quirksmode have a table of which selector (among other things) browser supports. unfortunaltly, there is not test for combining selector.
but as ie6 fail multiple classes it's not that surprising.

w3c css specification explains how css selector should works, there is a DIV.warningand E#myid which are not exactly like yours but suggest it should work (maybe it's explain in the page I didn't read it all ;) )

How do I combine ID, and Class together with an active?

.dashboard-wrapper isn't a child of #sidebar, it's sibling. Use + selector.

#sidebar.active + .dashboard-wrapper {
   margin-left: 89px;
}

Or use your current styles and change HTML markup and put .dashboard-wrapper into #sidebar.

<div class="nav-left-sidebar sidebar-dark" id="sidebar">
    SIDEBAR CONTENTS

    <div class="dashboard-wrapper">
        MAIN CONTENT
    </div>
</div>

How do I in CSS combine a plus selector with parent and class?

This SO post should answer your specific question about selector associativity.

If you have control over the HTML and you find yourself needing highly elaborate selectors, it's probably better to slightly reorganize the HTML instead (yes, this goes against the ideal of separating semantics and presentation, but HTML and CSS have always fallen far short in that respect)

Can I use DIV class and ID together in CSS?

Yes, yes you can.

#y.x {
 /* will select element of id="y" that also has class="x" */
}

Similarly:

.x#y {
 /* will select elements of class="x" that also have an id="y" */
}

Incidentally this might be useful in some use cases (wherein classes are used to represent some form of event or interaction), but for the most part it's not necessarily that useful, since ids are unique in the document anyway. But if you're using classes for user-interaction then it can be useful to know.

Combining CSS Selectors with :first-child

You're missing a space. You want the span that's the first child, not the div that's the first child.

Finds the first span:

#messages > div :first-child

Finds the first div:

#messages > div:first-child

---

Related Topics