HTML and CSS Reference
In-Depth Information
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
| - (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:
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
Search WWH ::

Custom Search