Matching attributes and selectors

You can also specify style rules that apply to tags with properties and values that match the ones in the style rule. There are a number of variations on this theme and examples are the easiest way to explain what happens.

You can match a tag’s property. For example, you can apply the colour blue to any <a> tag with an href property. It doesn’t matter what the value of href is:

a[href] {color: blue;}

You can match a specific value for a tag’s property. For example, you can apply a background colour of green to any <a> tags that point to www.ann.com. All other links appear as normal:

a[href="http://www.ann.com"] {background color: green;}

You can match more that one attribute and value. For example, you can apply the colour red to all right-aligned <h1> tags with a class of first.

h1 [class="first"] [align="right"] {color: red;}

You can match any one out of several words. You can use this option if the value of a tag’s property is a space-separated list of words. For example, you can apply the colour blue to any <p> tag that has the word example as part of the value for class. It would match <p class="example footnote">:

p[class~="example"]{color: blue;}

You can match the beginning of value. You can use this option if the value of a tag’s property is hyphenated. For example, you can apply the colour red to any <h1> tag where the lang attribute begins with en. This includes en-us, en-aus and any others that are valid:

H1 [lang¦="en"] {color: red;}