Section 17.5. Pseudoselectors


17.5. Pseudoselectors

Style rules are normally attached to elements in the document tree structure, such as those we've discussed in the chapter so far. But some elements are not necessarily found in the document markup, such as which links have been visited or the first line of a paragraph. To apply style to these instances in a document, CSS provides several pseudoselectors . Instead of targeting a particular element in the document, pseudoselectors are interpreted by the browser based on context and function. Pseudoselectors are indicated by the colon (:) character. Pseudoselectors are divided into pseudoclasses and pseudoelements.

17.5.1. Pseudoclasses

As the name implies, pseudoclasses work as though there is a class applied to a group of elements, most often the anchor (a) element. These "phantom" classes (to use Eric Meyer's term) do not appear in the markup, but rather are based on the state of those elements or the document itself.

17.5.1.1. Anchor pseudoclasses

There are several pseudoclasses that can be used to apply styles to various states of a link:

     a:link {color: red;}     a:visited {color: blue;}     a:hover {color: fuchsia;}     a:active {color: maroon;} 

Similar to their body attribute counterparts in the body element, :link applies to hypertext links that have not been visited, :visited applies to links to pages that have been visited, and :active applies during the act of clicking. The difference is that you can do much more than just change color with CSS. Following are popular rules for turning off the underline under linked text.

     a:link {color: red; text-decoration: none;}     a:visited {color: blue; text-decoration: none;} 

The :hover selector is used to create rollover effects in which the link changes in appearance when the mouse pointer moves over it. The examples above turned off underlines for links. The following rule uses :hover to make the underline appear as a rollover.

     a:link {color: red; text-decoration: none;}     a:hover {color: red; text-decoration: underline;} 

According to CSS 2, :active and :hover may be used with elements other than anchors, but this use is not supported in Internet Explorer (through Version 6) or Netscape 4.


Love, HA!

Anchor pseudoclasses need to appear in a particular order in a style sheet in order to function properly. The initials LVHA (or according to a popular mnemonic, love, HA!) remind developers that the correct order is :link, :visited, :hover, :active. This has to do with order and specificity. Putting :link or :visited last would override the :hover and :active states, preventing those styles from appearing.


17.5.1.2. Other CSS 2.1 pseudoclasses

In addition to the anchor pseudo-classes, the CSS 2 specification introduced additional pseudoclass selectors. Be warned, however, that they are not well supported at this time.


:focus

This targets elements that have focus, such as a form element that is highlighted and accepting user input. Although CSS 2 permits :focus to be applied to any element, it is currently only supported for use with the form elements. Netscape 6 supports :focus with a, input, textarea, and select.

Example: input:focus {background-color: yellow;}


:first-child

This targets an element that is the first occurring child of a parent element. It allows you to select the first paragraph of a div or the first li in a ul, for example.

Example: li:first-child {font-weight: bold;}


:lang( )

This targets an element that targets elements for which a language has been specified. It functions the same as the lang|= attribute selector, but may be more robust.

Example: p:lang(de) {color: green;}

Browser alert: Internet Explorer for Windows does not support :focus or :first-child in Versions 6 and earlier. Support in IE 7 (in beta as of this writing) is undocumented. Internet Explorer 5 for Macintosh, Netscape 6+ and Opera 7+ do support them. Internet Explorer 5 for Macintosh is the only browser that supports the :lang pseudoclass as of this writing.


17.5.2. Pseudoelements

Pseudoelement selectors work as though they are inserting fictional elements into the document structure for styling. Pseudoelements are generally parts of an existing element based on context, such as its first line or first letter. Four pseudoelements are included in CSS 2.1:


:first-line

As it sounds, this selector applies a style rule to the first line of the specified element. The properties for the :first-line pseudoelement are limited to color, font, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-TRansform, line-height, and text-shadow.

The following code adds extra letter spacing in the first line of text for every paragraph:

     p:first-line {letter-spacing: 6pt;} 


:first-letter

Attaches a style to the first letter of an element. The properties for :first-letter are limited to font, color, background, margin, padding, border, text-decoration, vertical-align, text-transform, line-height, and float. CSS 2.1 added the letter-spacing and word-spacing properties to this pseudoclass.

The following sample makes the first letter of any paragraph classified as "opener" big and red:

     p.opener:first-letter {font-size: 300%; color: red;} 


:before and :after

CSS 2 introduced these pseudoelements that insert generated content before and/or after a specified element and declare a style for that content.

This example inserts exaggerated quotation marks before and after a blockquote (&8220; and &8221; are the character entities for left and right curly quotation marks):

     blockquote:before {content: "“"; font-size: 24px; color: purple;}     blockquote:after {content: "”"; font-size: 24px; color: purple;} 

Browser alert: Internet Explorer does not support generated content (:before or :after) in Versions 6 and earlier. Support in IE 7, in beta as of this writing, is doubtful but is not specifically documented. Netscape 6+, Firefox/Mozilla, and Opera 7+ do support generated content.

All current CSS-compliant browsers support the :first-letter and :first-line pseudoelement selectors reasonably well.


17.5.3. Selector Summary

Table 17-1 provides a quick summary of the selectors covered in this chapter. Put a sticky-note on this page.

Table 17-1. Summary of selectors

Selector

Type of selector

Description

*

Universal selector

Matches any element.

     * {font-family:serif;} 

A

Type selector

Matches the name of an element.

     div {font-style: italic;} 

A B

Descendant selector

Matches element B only if it is a descendant of element A.

     blockquote em {color: red;} 

A>B

Child selector

Matches any element B that is a child of any element A.

     div.main>p {line-height:1.5;} 

A+B

Adjacent sibling selector

Matches any element B that immediately follows any element A.

     p+ul {margin-top:0;} 

.classname

A.classname

Class selector

Matches the value of the class attribute in all elements or a specified element.

     p.credits {font-size: .8em;} 

#idname

A#idname

ID selector

Matches the value of the id attribute in an element.

     #intro {font-weight: bold;} 

A[att]

Simple attribute selector

Matches any element A that has the given attribute defined, whatever its value.

     table[border] {background-color: white;} 

A[att="val"]

Exact attribute value selector

Matches any element B that has the specified attribute set to the specified value.

     table[border="3"] {background-color: yellow;} 

A[att~="val"]

Partial attribute value selector

Matches any element B that has the specified value as one of the values in a list given to the specified attribute.

     table[class~="example"] {background-color: orange;} 

A[hreflang|="es"]

Hyphenated prefix attribute selector

Matches any element A that has an attribute hreflang with a hyphen-separated list of values beginning (from the left) with "es".

     a[hreflang|="es"] {background-image: url(flag-es.png);} 

a:link

Pseudoselector

Specifies a style for links that have not yet been visited.

     a:link {color: purple;} 

a:visited

Pseudoselector

Specifies a style for links that have already been visited.

     a:visited {color: gray;} 

:active

Pseudoselector

Applies a style to elements (typically links) while in their active state.

     a:active {color: red;} 

:after

Pseudoselector

Inserts generated text at the end of the specified element and applies a style to it.

     p.intro:after {content: "fini"; color: gray;} 

:before

Pseudoselector

Inserts generated text at the beginning of the specified element and applies a style to it.

     p.intro:before {content: "start here "; color: gray;} 

:firstchild

Pseudoselector

Specifies a style for an element that is the first child of its parent element in the flow of the document source.

     p:firstchild {text-style: italic;} 

:first-letter

Pseudoselector

Specifies a style for the first letter of the specified element.

     p:first-letter {font-size: 60px;} 

:first-line

Pseudoselector

Specifies a style for the first line of the specified element.

     p:first-line {color: fuchsia;} 

:focus

Pseudoselector

Specifies a style for elements (typically form controls) that have focus (selected and ready for user input).

     input[type="text"]:focus {background-color: yellow;} 

:hover

Pseudoselector

Specifies a style for elements (typically links) that appears while the pointer is over them.

     a:hover {text-decoration: underline;} 

:lang(ab)

Pseudoselector

Specifies a style for an element for which its language matches the given language code (or language code prefix).

     a:lang(de) {color: green;} 





Web Design in a Nutshell
Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))
ISBN: 0596009879
EAN: 2147483647
Year: 2006
Pages: 325

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net