Nyomtatás
Pseudo-class (CSS2.1) |
Description |
Applies to |
:link |
Applies to links that have not been visited. |
links |
:visited |
Applies to links that have been visited. |
links |
:hover |
Applies to an element which the mouse is currently over. |
all |
:active |
Applies to an element currently being activated by the user (ie: the mouse is held down over). |
all |
:focus |
Applies to an element while it has the user focus. |
all |
:first-child |
Matches an element that is the first child of some other element. |
all |
:first-letter |
Applies to the first letter of a paragraph. |
block level elements |
:first-line |
Applies to the first formatted line of a paragraph. |
block level elements |
:lang |
Applies to an element when it's in the designated language. |
all |
CSS Example #1 (link pseudo-classes):
A:link { color: red } /* unvisited links */
A:visited { color: blue } /* visited links */
A:hover { background-color: yellow } /* user hovers over link*/
A:active { color: lime } /* active links */
CSS Example #2 (:first-child pseudo-class):
img:first-child{ border: 1px solid gray; }
First step: Choose the Macromedia Dreamweaver Window / Css style ;
Second step :Choose the pseudo-class selectors here ;
Third step : put the style into you would like ( color,border,font,extensions ,background etc...);
Fourth step :Choose the propeties part of Css style that you have create on your web-page.
SYNTAX
The syntax of pseudo-elements:
selector:pseudo-element {property:value}
CSS classes can also be used with pseudo-elements:
selector.class:pseudo-element {property:value}
--------------------------------------------------------------------------------
The :first-line Pseudo-element
The "first-line" pseudo-element is used to add a special style to the first line of a text.
In the following example the browser formats the first line of text in a p element according to the style in the "first-line" pseudo-element (where the browser breaks the line, depends on the size of the browser window):
Example
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
CSS Pseudo-elements
< Previous Next Chapter >
--------------------------------------------------------------------------------
CSS pseudo-elements are used to add special effects to some selectors.
--------------------------------------------------------------------------------
Syntax
The syntax of pseudo-elements:
selector:pseudo-element {property:value}
CSS classes can also be used with pseudo-elements:
selector.class:pseudo-element {property:value}
--------------------------------------------------------------------------------
The :first-line Pseudo-element
The "first-line" pseudo-element is used to add a special style to the first line of a text.
In the following example the browser formats the first line of text in a p element according to the style in the "first-line" pseudo-element (where the browser breaks the line, depends on the size of the browser window):
Example
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
Try it yourself >
Note: The "first-line" pseudo-element can only be used with block-level elements.
Note: The following properties apply to the "first-line" pseudo-element:
.font properties
.color properties
.background properties
.word-spacing
.letter-spacing
.text-decoration
.vertical-align
.text-transform
.line-height
.clear
--------------------------------------------------------------------------------
The :first-letter Pseudo-element
The "first-letter" pseudo-element is used to add a special style to the first letter of a text:
Example
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
Note: The "first-letter" pseudo-element can only be used with block-level elements.
Note: The following properties apply to the "first-letter" pseudo- element:
.font properties
.color properties
.background properties
.margin properties
.padding properties
.border properties
.text-decoration
.vertical-align (only if "float" is "none")
.text-transform
.line-height
.float
.clear
--------------------------------------------------------------------------------
Pseudo-elements and CSS Classes
Pseudo-elements can be combined with CSS classes:
p.article:first-letter {color:#ff0000}
A paragraph in an article
The example above will display the first letter of all paragraphs with class="article", in red.
--------------------------------------------------------------------------------
Multiple Pseudo-elements
Several pseudo-elements can also be combined.
In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:
Example
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}