Pseudo classes are used for an elements state. Whilst they have a variety of uses, the most common is to style the states of links a.k.a the anchor tag.
| Selector | Description | Example Ruleset |
|---|---|---|
a:link |
styles unvisited link | a:link {
color: plum;
} |
a:visited |
styles visited link | a:visited {
color: deepskyblue;
} |
a:hover |
styles mouse over link | a:hover {
color: orchid;
} |
a:active |
styles selected link | a:active {
color: skyblue;
} |
Pseudo Classes have a range of great uses especially for tables and forms. Take a look below for a small sample of what they can do.
| Selector | Description | Example Ruleset |
|---|---|---|
:first-child |
styles first child of it's parent element (like this table's first td) | td:first-child {
background-color: yellow;
} |
::first-letter |
styles first letter of block a level selector (like this) | td::first-letter {
color: darkorchid;
} |
:last-of-type |
styles last element of any type (see the last paragraph on this page) | p:last-of-type {
color: darkorchid;
} |
::selection |
styles User's selection (try selecting text in a paragraph above) | p::selection {
color: plum;
background: azure;
} |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec sapien eu felis tempus ultricies. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc posuere, metus at ultrices sollicitudin, elit leo vehicula erat, sit amet pellentesque justo sapien eu ligula. Aenean in tortor at est cursus ultricies convallis lobortis purus.