Prev | Current Page 68 | Next

Charles Wyke-Smith

"Stylin' with CSS: A Designer's Guide 2nd Edition"


You can also be speci?¬? c about what the attribute??™s value should be.
For example, the rule
img[alt="Dartmoor-view of countryside"] {border:3px green
solid;}
only puts the border around the image if the image??™s alt attribute
is "Dartmoor-view of countryside"; in other words, if the image
markup looks something like this
Dartmoor-view of countryside
This selector is made more useful by the fact that it lets you specify
just the ?¬? rst characters of the attribute value, but the ???common???
part of the attribute must be separated from the ???different??? part of
the attribute with a hyphen. So, if you have carefully written your
img tags with attributes like these (note the hyphens)
Dartmoor-small cottage
Dartmoor-view of countryside
then you can select them by adding the pipe symbol (usually typed
with Shift-\) into your rule, like this
img[alt|="Dartmoor"] {border:3px blue solid;}
The text of these image alt tag examples
is deliberately very brief for the
sake of clarity. From an accessibility
point of view, however, always write
alt text that is meaningful for a user
who can??™t see the image.


Pages:
56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80