How to Use Div Class and Id Together in CSS

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.

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 ;) )

Can an element have both an id and a class?

Yes, an element can have one ID (which must be unique!) and multiple classes at the same time. To have multiple classes, use a space between them, here's an example:

<div id="myID" class="class1 class2 class3">Content</div>

Use multiple IDs for divs in CSS

You have to put

#box-left a, #box-middle a, #box-right a {
    text-decoration:none;
    color:#000000;
}

Each value on the comma separator list is a selector on its own, it is not combined with the next elements:

#foo, .class p, #bar p:first-child a {
  something;
}

is equivalent to

#foo {
  something;
}

.class p {
  something;
}

#bar p:first-child a {
  something;
}

how to properly use CSS Class and ID

When you refer to an id or class in css, you must use the full name of the class or id you are selecting. For example, when you want to refer to a div element that has id="someid" you must write #someid { in your stylesheet to reference this div by id.

Anyway, you're thinking about it right but your syntax is a bit off. Here is what you might be looking for:

/* common footer code goes here */
.footer
{
    width: 100%;
    height: 100px;
    border: 1px solid black;
    text-align: center;
}

/* code specific for each page goes here */
#page1.footer
{
    background-color: red;
    font-color: white;
}

#page2.footer
{
    background-color: blue;
    font-color: white;
}

#page3.footer
{
    background-color: white;
    font-color: black;
}

Using two selectors in the same line is called selector chaining. In this case, you want to chain an id selector with a class selector.

Edit:
Here is a jsfiddle.

Looking at your code, the obvious "bad habit" one could find is that the ids page1, page2, and page3 are all in the footer div of those pages, which is a bit confusing, as "page" doesn't exactly uniquely define a footer.
Make sure you only use one id of the same name on any page, and if you do use an id, it should describe that element uniquely.

As the others have said, it should be noted that recently it has become good practice to avoid using ids (except for javascript functionality). Using only classes whenever possible is now the standard. It's good to know how to preform selector chaining and of course proper syntax is always important.

HTML - Apply CSS - with parent Div with id to child div with CSS

You need to escape the :

#tableForm\:mainTable\:selectFilterMenu-crop {  border:2px solid;}
#tableForm\:mainTable\:selectFilterMenu-crop div.ui-selectlistbox-listcontainer {    height: 100% !important;    background:red;}

<div id="tableForm:mainTable:selectFilterMenu-crop" class="ui-selectmanymenu ui-inputfield ui-widget ui-widget-content ui-corner-all" style="width:165px; height:270px"><div class="ui-selectlistbox-listcontainer" ></div></div>