HTML and CSS Reference
In-Depth Information
The following style rule displays the French expressions in italic font:
:lang(fr) {
font-style: italic;
}
Attribute Selectors
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
Pattern
Description
E[attr*=
"x"]
Matches any
E
element where the
attr
attribute contains the substring
x
.
E[attr~
="x"]
Matches any
E
element where the
attr
attribute is a list of space-separated values,
one of which is exactly
x
.
E[attr|=
"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
attribute.
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.
Tip
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
Pseudo-element
Description
::before
Creates generated content before an element. IE 8 supports only the CSS2.1 version
prefixed by a single colon (
:before
).
::after
Creates generated content after an element. IE 8 supports only
:after
.
