important thing will be a paragraph, a short phrase, a list item, or a section
     heading. You know only that it will exist in each document, occur in an arbitrary
     element, and appear no more than once. In that case, you would write a rule like
     this:
#mostImportant {color: red; background: yellow;}
    This rule would match any of the following elements (which, as I noted before,
     should not appear together in the same document because they all
     have the same ID value):

This is important!

This is important!

This is important!

    Also note that class and ID selectors may be case-sensitive, depending on the
     document language. HTML and XHTML define 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 element will not be
     boldfaced:
p.criticalInfo {font-weight: bold;}

Don't look down.

    Because of the change in case for the letter i , the selector
     will not match the element shown.
    Warning
    Some older browsers did not treat class and ID names as case-sensitive, but all
     browsers current as of this writing enforce case sensitivity.

Attribute Selectors
    When it comes to both class and ID selectors, what
     you're really doing is selecting values of attributes. The syntax used in the previous
     two sections is particular to HTML, SVG, and MathML documents (as of this writing). In
     other markup languages, these class and ID selectors may not be available. To address
     this situation, CSS2 introduced attribute selectors ,which can be used to select elements based on
     their attributes and the values of those attributes. There are four types of attribute
     selectors.
    Warning
    Attribute selectors are supported by Safari, Opera, and all Gecko-based browsers,
     but not by Internet Explorer up through IE5/Mac and IE6/Win. IE7 fully supports all
     CSS2.1 attribute selectors, as well as a few CSS3 attribute selectors, which are
     covered in this section.
    Simple Attribute Selection
    If you want to select elements that have a certain attribute, regardless of that
     attribute's value, you can use a simple attribute selector. For example, to select
     all
h1
elements that have a
class
attribute with any value and make their text
     silver, write:
h1[class] {color: silver;}
    So, given the following markup:

Hello

Serenity

Fooling

    you get the result shown in Figure
     2-10 .
    Figure 2-10. Selecting elements based on their attributes
    This strategy is very useful in XML documents, as XML languages tend to have
     element and attribute names that are very specific to their purpose. Consider an XML
     language that is used to describe planets of the solar system (we'll call it
     PlanetML). If you want to select all
planet
elements with a
moons
attribute and make them
     boldface, thus calling attention to any planet that has moons, you would write:
planet[moons] {font-weight: bold;}
    This would cause the text of the second and third elements in the following markup
     fragment to be boldfaced, but not the first:
Venus
Earth
Mars
    In HTML documents, you can use this feature in a number of creative ways. For
     example, you could style all images that have an
alt
attribute, thus highlighting those images that are correctly formed:
img[alt] {border: 3px solid red;}
    (This particular example is useful more for diagnostic purposes—that is,
     determining whether images are indeed correctly formed—than for design purposes.)
    If you wanted to boldface any element that includes
title
information, which most browsers display as a "tool tip" when a
     cursor hovers over the element, you could write:
*[title] {font-weight: bold;}
    Similarly, you could style only those