CSS ID and Class Selectors

Question

What do these two CSS selectors mean?

h1#myItemOne h2
{
    background:#0099FF;
    color: #A3F4A3;
}

h1.myItemTwo  h2
{ 
    background:#0099FF;
    color: #A3F4A3;
}

Are these two selectors valid for use?

Answer 1

The first matches an h2 element that is a child descendant of an h1 element with the id myItemOne

Example:

<h1 id="myItemOne">
    <h2>Me!</h2>
</h2>

The second matches an h2 element that is a child descendant of an h1 element with the class myItemTwo

Example:

<h1 class="myItemTwo">
    <h2>Me!</h2>
</h2>

They are both valid. The major difference is that id should be unique. Class does not have this requirement.

Reference: http://www.w3.org/TR/CSS2/selector.html

Answer 2

h1#myItemOne h2 { background:#0099FF; color: #A3F4A3; }

Means any h2 that is a descendant of an h1 element with ID equal to "myItemOne"

h1.myItemTwo h2 { background:#0099FF; color: #A3F4A3; }

Means any h2 that is a descendant of an h1 element with class equal to "myItemOne"

Answer 3

"#" defines a unique id in a page, the dot defines a class that you can use on several places.

Usage:

<h1 id="...."></h1>
<h1 class="...."></h1>