HTML and CSS Reference
In-Depth Information
Finally, we can look over an attribute value and find matches within it using
[attr*=value]
. Here we match paragraph elements with the word “found” present in the
title
attribute:
p [title*="found"] {background-color: red;}
This will match
<p title="The match is found in here">
This should be red.
</p>
but not match this paragraph
<p title="No match can be seen here">
This shouldn't be red.
</p>
as it is missing the word we match on. However, note that this isn't really a word match but
more a substring match as it will match the following markup:
<p class="group4" title="*foundinside*">
This should be red.
</p>
However, as a pattern match, it is susceptible to casing, so this markup
<p class="group4" title="*Foundinside*">
This shouldn't be red.
</p>
wouldn't match. If you are familiar with regular expressions and start to imagine a complex
CSS selector system with case-sensitivity wildcards and more. If you have bad dreams
about regular expressions, you might guess where this trend may end up someday.
Multiple Attribute Selectors
As you learn about more selectors, always remember that you can combine previous ideas
together. For example,
p.group1[title] {background-color: red;}
would match any
<p>
tag with the class “group1” and with the
title
attribute set.
Contextual selection also could be applied, where
#nav a[href="http://"] {font-weight: bold;}
would match any
<a>
tags which are descendents of some element with an
id
value of
“nav” that have
href
values that start with “http://” and make them bold.
We can also match multiple attribute characteristics at once. Consider the following:
p[title="Test Selector"][lang|="en"] {border: 2px solid black; }
This rule would match a
<p>
tag with a title set to “Test Selector” and a
lang
value in the
English family. To experiment with attribute selectors, see the example online at http://
htmlref.com/ch4/attributeselectors.html. Table 4-7 presents all the attribute selectors
together.
