Pseudo-classes:
Pseudo-classes allow you to format items that are not in the document tree, ie: where there is no CSS selector available, like the state of a hyperlink. Eg. active or visited.
Eg:
- :first-child
- :link
- :visited
- :hover
- :active
- :focus
- :lang(n)
Styling links (anchor tags):
With pseudo-classes, you can style links in different ways in each of the four states:
a:link is the selector for normal links
a:visited is the selector for visited links
a:hover is the selector for hover state
a:active is the selector for active links
Pseudo class selectors should always be used/declared in the following order for specificity reasons:
1. a {}
2. a:link {}
3. a:visited {}
4. a:hover {}
5. a:active {}
You can also combine states if required, as long as the order (link and visited before hover and active) is maintained:
a:link, a:visited { color: blue; }
a:hover, a:active { color: red; }
Pseudo-elements:
Pseudo-elements allow you to style information that is not available in the document tree.
Eg: using standard selectors there is no way to style the first letter or first line of an element's content.
:first-line and :first-letter
:first-line selector: select first line of an element, like a paragraph.
p:first-line {font-weight: bold; }
:first-letter selector: select first letter of an element, like a paragraph.
p:first-letter {font-size: 200%; font-weight: bold; }
Eg:
<html>
<head>
<style type="text/css">
p:first-letter {font-size: 200%; font-weight: bold; }
</style>
</head>
<body>
<p>Once upon a time...</p>
</body>
</html>
Outputs:
:before and :after
These two pseudo-element selectors are used to insert generated content either before or after an element on the page.
