HTML and CSS Reference
In-Depth Information
the sake of applying styling. In fact, jQuery selectors are based on the idea of CSS selectors. CSS3 adds
many new selectors to those that already existed in CSS. This section introduces some of the important
ones.
If you've used CSS in the past, chances are you're already familiar with the concept of selectors.
Consider the following CSS class:
#mydiv{ border: 2px #f00 solid; }
This class uses the
ID selector
and is applied to a DOM element whose ID attribute is
mydiv
. The other
two commonly used CSS selectors are the element selector and the class selector. An
element selector
selects all the elements of specific tag name, whereas a
class selector
selects all the elements whose
class
attribute is set to a specific CSS class name. The following examples show these two selectors:
div{ border: 2px #f00 solid; }
.myclass{ border: 2px #f00 solid; }
The first CSS class uses an element selector that selects all the
<div>
elements and applies to them a
border with a specified color and width. The second class selects all the DOM elements whose
class
attribute is set to
myclass
and applies to them a border with a specified color and width.
n
Note
In addition to the selectors just discussed, CSS 2.1 offers a few others, but this chapter doesn't discuss
them. Here we focus only on the newly added selectors in CSS3.
The newly added selectors of CSS3 that are discussed in the following sections can be grouped in four
categories:
•
Attribute-substring selectors:
Allow you to select elements whose attribute value
starts with, ends with, or contains a specified string
•
Structural pseudo-classes:
Let you select elements based on their structural position,
such as a specific child element
•
Element-state pseudo-classes:
Allow you to select elements that are in a specific state,
such as enabled, disabled, or checked
•
Miscellaneous pseudo-classes:
Provide miscellaneous functionality that doesn't fit in
any other category
The following sections discuss each of these groups of selectors in detail.
Attribute-Substring Selectors
The attribute-substring selectors allow you to select DOM elements whose attribute values start with, ends
with, or contain a specified string. These three selectors are listed in Table 13-1.
Table 13-1.
Attribute Substring Selectors
Selector
Operator
Description
^=
Attribute starts with
Matches the start of an attribute value with a specified string
$=
Attribute ends with
Matches the end of an attribute value with a specified string
*=
Attribute contains
Checks whether an attribute value contains a specified string
