HTML and CSS Reference
In-Depth Information
#mostImportant {color: red; background: yellow;}
This rule would match any of the following elements (which, as noted before, should
not
appear together in the same document because they all have the same ID value):
<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em>
<ul id="mostImportant">This is important!</ul>
Deciding Between Class and ID
You may assign classes to any number of elements, as demonstrated earlier; the class
name
warning
was applied to both a
p
and a
span
element, and it could have been applied
to many more elements. IDs, on the other hand, are used once, and only once, within
an HTML document. Therefore, if you have an element with an
id
value of
lead-
para
, no other element in that document can have an
id
value of
lead-para
.
In the real world, browsers don't always check for the uniqueness of IDs
in HTML. That means that if you sprinkle an HTML document with
several elements, all of which have the same value for their ID attributes,
you'll probably get the same styles applied to each. This is incorrect
behavior, but it happens anyway. Having more than one of the same ID
value in a document also makes DOM scripting more difficult, since
functions like
getElementById()
depend on there being one, and only
one, element with a given ID value.
Unlike class selectors, ID selectors can't be combined, since ID attributes do not permit
a space-separated list of words.
Another difference between
class
and
id
names is that IDs carry more weight when
you're trying to determine which styles should be applied to a given element. This will
be explained in greater detail later on.
Also note that class and ID selectors may be case-sensitive, depending on the document
language. HTML defines class and ID values to be case-sensitive, so the capitalization
of your class and ID values must match that found in your documents. Thus, in the
following pairing of CSS and HTML, the elements text will not be boldfaced:
p.criticalInfo {font-weight: bold;}
<p class="criticalinfo">Don't look down.</p>
Because of the change in case for the letter
i
, the selector will not match the element
shown.
Some older browsers did not treat class and ID names as case-sensitive,
but all browsers current as of this writing correctly enforce case sensi-
tivity.
