SELECTORS - CSS: Professional Techniques for Modern Layout - page 54

... then you can always select that image, like so:

img[src=" / img /2010/ mainlogo.png"]

You don't need to class or ID it or anything else: You can just style it based on the src value.
Assuming, as I say, that you know it will always have exactly that value, and no other. (For
adventures in less exact value matching, see “Substring Attribute Selection” later in this chapter.)

One thing to note is that, per the CSS specii cation, “the case-sensitivity of attribute names
and values in selectors depends on the document language” ( www.w3.org/TR/CSS2/
selector.html#matching-attrs ). In other words, some markup languages might treat
attribute names case-sensitively, and others might not. XHTML does, and in general you're
better of assuming that both attribute names and values are case-sensitive.

ATTRIBUTE SELECTION OF CLASSES
If you read the preceding section, you may be thinking, “Hey, I could recreate the .class
notation with attribute selectors!” And you're right, you can. Just not in any of the ways I
showed you earlier.

Here's how to get an exact equivalent to div.panel with attribute selectors:

div[class~="panel"]

56

Did you spot the tilde? It's right before the equal sign, and it's absolutely critical in this
situation. Its presence means the attribute selector selects “the following word in a space-
separated list of words,” which is a lot for a little squiggle to shoulder.

To understand more clearly, let me show you what happens if the tilde is removed. h en you'd
have:

div[class="panel"]

h at selects any div element whose class attribute is panel —and only if it is exactly
panel . If the class is actually panel weather , then the preceding example will not
match it—because panel is not exactly the same as panel weather . On the other hand,
div.panel will match <div class="panel weather"> just i ne.

By including the tilde, you get the exact same behavior as the dot-class syntax. So the follow-
ing two rules are exactly equivalent in all ways except the actual letters you use to type them:

div[class~="panel"]
div.panel