HTML and CSS Reference
In-Depth Information
<p class="info">Green</p>
If a class rule will be used by only a single element type, it can instead be defined as
a specific class. Doing so makes it easier for anyone reading the style sheet to understand
where the style is used.
p.warn { color: orange; }
A specific class rule is applied to the document in the same way as a general class
rule, but it will style elements of only the specified type.
<p class="warn">Orange</p>
More than one class rule can be applied to a single element by separating each class
name with a space, which makes class rules very versatile.
<p class="style1 style2"></p>
Id selector
The id selector is used to identify a single unique element. Although it works much like
the class selector, it uses a pound sign (
#
) instead of a period and the
id
attribute instead
of the
class
attribute. Like the
class
attribute, the
id
is a generic attribute that can be
applied to virtually any HTML element. It provides a unique identifier for an element
within a document.
/* Selects the element with id set to myid */
#myid {}
Like class selectors, id selectors can be qualified with an element. However, because
there should be only one element with a given id, this additional qualifier is often
considered unnecessary.
/* Selects the <p> element with id set to myid */
p#myid {}
Id example
The following id selector will match the one and only element in the document whose
id
attribute is set to that id. This selector can therefore be used instead of the class selector
if a style is intended to be applied to only a single element instance because this makes it
clearer where the rule is used.
#err { color: red; }
