CSS. Pseudo-classes and pseudo-elements |
Many beginning web developers know and use cascading style sheets (CSS) in their projects. But few people know about existence of pseudo-classes and pseudo-elements. Pseudo-classes and pseudo-elements permit to specify your own display styles for such elements as <A> and <P>.
Pseudo-classes of <A> element (links):
A:link { Style of the element }
A:visited { Style of the element }
A:link — non-visited link, A:visited — display style for an already visited link.
Example:
Visited link
Non-visited link
Dynamic pseudo-classes
For links with hovering mouse cursor, activated and focused links:
A:hover { Style of the element }
A:active { Style of the element }
A:focus { Style of the element }
A:hover — specifies style of the element <A> during hovering of the cursor, A:active – activated link (right mouse button is pressed, try to drag the link with the help of the mouse), A:focus – if the link is in focus (focus may be passed to the link in any way, for example, using the Tab key).
Example:
Link display during hovering, activating and obtaining focus
During hovering link color is #02924c, during activating background color will change into #ff0113, and during obtaining focus font style will change into italicized.
Pseudo-elements
P:first-line { Style of the element }
P:first-letter { Style of the element }
P:first-line — identifies display style of the first line, P:first-letter — identifies display style of the first letter.
Example:
First letter and first line.First letter and first line.First letter and first line.
Second line.Second line.Second line.
Third line. Third line. Third line.
Fourth line. Fourth line. Fourth line.
Styles of the elements <A> и <P> in this article:
TAGS
pseudo-classes,
pseudo-elements,
style sheets,
styles,
display,
dynamic |
website development 
