HTML and CSS Reference
In-Depth Information
[class="book"]
{
background-color:yellow;
}
This is functionally equivalent to using the
.book
class selector; however, the attribute selector allows you to
select using only portions of the attributes value. To do that, prefix the equal sign (“=”) with one of the following:
•
~
- (e.g.
[class~
="book"]
) The attribute value must include the word indicated by the
selector value (e.g.
class=
"some
book
titles"
). This is exactly how the class selector
works.
•
| - (e.g.
[class|=
"book"]
) The attribute value must begin with a word that matches the
selector value (e.g.
class=
"
book
titles"
)
•
^
= (e.g.
[class^="book"]
) The attribute value must begin with the selector value
(e.g.
class="
book
s"
)
•
$
- (e.g.
[class$="book"]
) The attribute value must end with the selector value
(e.g.
class="check
book
"
)
*
- (e.g.
[class*="book"]
) The attribute value must contain the selector value
(e.g.
class="over
book
ed"
)
You can specify the attribute without a value, which will return all elements that have the attribute. A good
example of this is the
[href]
selector, which will select all elements that have the
href
attribute, regardless of
its value. You can also include an element selector before an attribute selector to further restrict the selected
elements. For example,
img[src^="https"]
will return all
img
elements whose
src
attribute begins with https.
•
Pseudo-Class Selectors
There are quite a few selectors that are based on dynamic properties of an element. Consider a hyperlink, for
example. If the page referenced by the link has been displayed, the link is usually displayed with a different color.
This is achieved using a CSS rule that uses the
visited
property like this:
a:visited
{
color: purple;
}
This will change the color of all
a
elements that have the
visited
flag set. Several of these selectors have
been available for some time but CSS3 defines a fairly large set of new ones. Here is the complete list:
•
:active
- selects the active link
•
:checked
- selects elements that are checked (applies to check boxes)
•
:disabled
- selects elements that are currently disabled (typically used for input elements)
•
:empty
- selects elements that have no children (elements that include text are not selected)
•
:enabled
- selects elements that are enabled (typically used for input elements)
•
:first-child
- selects the elements that are the first child of its immediate parent
•
<tag>:first-of-type
- select the elements that is the first of the specified type within its parent
•
:focus
- select the element that currently has the focus
:hover
- select the element that the mouse is currently hovering over
•
