Style Sheets Guide
=Pseudo Document Structures=
= Index DOT Html by Brian Wilson
[bloo@blooberry.com] =
Pseudo Structures are logical abstractions of HTML formatting that can be used as
Selectors in Style Sheet syntax. These
abstractions, which can be divided into two categories , Pseudo-Classes
and Pseudo-Elements, do not exist as actual HTML tags. Their behavior
is defined by a "fictional tag sequence" where they have well defined HTML
behavior. Pseudo structures are addressed in Selectors by attaching them to existing HTML
tags with a colon (':') character.
Pseudo-Classes
[ IE3B1 | N4B5 ]
This class type allows a Selector to specify style information for different behavioral
states of existing HTML tags. Currently, the only HTML tag with well-defined state
behavior is the Hyperlink tag (A HREF.) All Selector
grouping shorthand syntaxes can be applied to Pseudo-Classes.
-
A HREF [ IE3B1
| N4B5 ]
States:
'link' [
IE3B1 | N4B5 ]:
General state of a hyperlink before it has been activated.
'visited' [
IE3B1 | N4B5 ]:
State of a hyperlink after it has been activated.
'active' [
IE | N ]:
State of a hyperlink during which it is currently activated.
HTML Equivalent:
<body LINK
VLINK ALINK>
Examples:
Modifying a plain tag: a:active
{ color: red }
Combining with a normal class: a.test:visited
{ color: red }
Within a Contextual Selector: a:link img
{ border: solid green }
|
Pseudo-Elements
[ IE | N ]
This type of element represents a logical typographical structure that is
not defined within HTML. These elements address "virtual" components of existing
HTML structures (Block Elements.) No popular browsers support this feature yet.
Pseudo Element
|
Support
|
Applies To
|
Example
|
Description
|
first-letter |
IE | N |
Block Elements |
div.first-letter
{ font-size: xx-large } |
This is used to apply styles to the first LETTER of an HTML
Block Structure. The browser will decide which characters are inside this
Pseudo-Element. |
first-line |
IE | N |
Block Elements |
p.first-line
{ margin-left: 0.5in } |
This is used to apply styles to the first LINE of an HTML Block Structure
on an output device (A browser screen, printer, etc.) |
Pseudo Element Exceptions to Selector Grouping
Syntaxes:
- Pseudo-Elements should be specified at the END of the Selector when grouping
with other Classes and Pseudo-Classes.
Example:
blockquote.foo:first-letter
{ color: red }
- Within Contextual Selectors, Pseudo-Elements are only allowed as the last Selector.
Example:
body p:first-line
{ margin-left: 2.0cm }
- Only one Pseudo-Element can be specified per Selector. To modify an HTML structure
with multiple Pseudo-Elements, multiple style Selector/Declaration statements must be made.
Example:
blockquote.foo:first-letter
{ color: red }
blockquote.foo:first-line
{ margin-left: 0.5in }
Boring Copyright Stuff....