CSS: The Definitive Guide, 3rd Edition

CSS: The Definitive Guide, 3rd Edition by Eric A. Meyer Page A

Book: CSS: The Definitive Guide, 3rd Edition by Eric A. Meyer Read Free Book Online
Authors: Eric A. Meyer
Tags: COMPUTERS / Web / Page Design
Ads: Link
expected, but
p.warning.help
would match any
p
elements that have a
class
attribute with the
     word
help
because it comes last in the
     selector. If you wrote
p.help.warning
, then
     older versions of Explorer would match any
p
elements that have
warning
in their
class
value, whether or not
help
appears in the same value.
    ID Selectors
    In some ways,
     ID selectorsare similar to class selectors,but there are a few crucial differences. First, ID selectors are preceded by an
     octothorpe (
#
)—also known as a pound sign, hash
     mark,or tic-tac-toe board—instead of a
     period. Thus, you might see a rule like this one:
*#first-para {font-weight: bold;}
    This rule applies boldface text to any element whose
id
attribute has a value of
first-para
.
    The second difference is that instead of referencing values of the
class
attribute, ID selectors refer, unsurprisingly, to
     values found in
id
attributes. Here's an example
     of an ID selector in action:
*#lead-para {font-weight: bold;}

This paragraph will be boldfaced.


This paragraph will NOT be bold.


    Note that the value
lead-para
could have been
     assigned to any element within the document. In this particular case, it is applied
     to the first paragraph, but you could have applied it just as easily to the second or
     third paragraph.
    As with class selectors, it is possible to omit the universal selector from an ID
     selector. In the previous example, you could also have written:
#lead-para {font-weight: bold;}
    The effect of this selector would be the same.
    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
.
    Tip
    In the real world, browsers don't usually check for the uniqueness ofIDs in
     HTML, which 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.
    On a purely syntactical level, the dot-class notation(e.g.,
.warning
) is not guaranteed to work for XML documents. As of this writing,
     the dot-class notation works in HTML, SVG, and MathML, and it may well be permitted
     in future languages, but it's up to each language's specification to decide that. The
     hash-ID notation(e.g.,
#lead
) will work in any document language that has an
     attribute that enforces uniqueness within a document. Uniqueness can be enforced with
     an attribute called
id
, or indeed anything else,
     as long as the attribute's contents are defined to be unique within the document.
    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. I'll explain
     this in greater detail in the next chapter.
    As with classes, IDs can also be selected independently of an element. There may
     be circumstances in which you know that a certain ID value will appear in a document,
     but you don't know the element on which it will appear (as in the plutonium-handling
     warnings), so you'll want to declare standalone ID selectors. For example, you may
     know that in any given document, there will be an element with an ID value of
mostImportant
. You don't know whether that most
    

Similar Books

Judas Horse

April Smith

Blackbird's Fall

Jenika Snow

Southern Attraction

Tracy Kauffman

Lullaby

Claire Seeber