HTML and CSS Reference
The following style rule displays the French expressions in italic font:
Chapter 2 introduced four commonly used attribute selectors. There are three more, as listed in Table 13-7 . They
are supported by all browsers except IE 6.
Table 13-7. Miscellaneous Attribute Selectors
Matches any E element where the attr attribute contains the substring x .
Matches any E element where the attr attribute is a list of space-separated values,
one of which is exactly x .
Matches any E element where the value of the attr attribute is either exactly x or x
immediately followed by a hyphen.
The first attribute selector in Table 13-7 matches whole words or part-words. For example,
img[title*= "jest"] matches images that contain jest, jester, or majesty in their title attribute.
If you replace the asterisk with a tilde, the selector matches only whole words within a space-separated list.
For example, img[title~ ="jest"] matches images that contain jest, but not jester or majesty in their title
The final selector in Table 13-7 is intended primarily for matching language codes, for example
a[hreflang|= "fr"] matches <a> elements that have either hreflang= "fr-CA" and hreflang= "fr-FR" in the
opening tag. Unlike the :lang() pseudo-class, this attribute selector ignores language information sent in the
HTTP headers. It applies only to elements with a matching attribute.
■ The value being matched is case-sensitive, but in HTMl the attribute name is not. so, in HTMl (but not
XHTMl), img[TITLE~ ="jest"] and img[title~ ="jest"] both match an image with jest—but not Jest—in its
title attribute. Css4 proposes introducing case-insensitive matches.
Pseudo-elements for Generated Content
The last two selectors are the pseudo-elements listed in Table 13-8 .
Table 13-8. Pseudo-elements for Generated Content
Creates generated content before an element. IE 8 supports only the CSS2.1 version
prefixed by a single colon ( :before ).
Creates generated content after an element. IE 8 supports only :after .