Pseudo-classes

The book covers material here on p 442 and following.

Pseduo-classes apply styles based on conditions other than their type or something else they are marked with. Some kind of condition.
Pseudo-classes attach to regular selectors with a colon, selector:pseudoclass for instance a:visited, which colors links after they have been clicked on.
User action pseduo-classes
1. The one will use most is selector:hover, which applies while you are pointing at the element.
2. We'll find some others useful when we get to HTML forms.
Position-related pseudo-classes.
1. selector:first−child, applies to the first element of its parent.
2. selector:last−child, likewise, the last child.
3. selector:nth−child(even), matches an element if it is an even child of its parent, that is, the second, fourth, sixth, etc. There are more complicated forms of this to match various patterns.
4. Why these need to be pseudo-classes, while things like sibling selectors are not, escapes me.
Note that the pseudo-class makes the selection more specific.
1. Use someselector { generalrules } and someselector:somepseudoclass { exceptions }.
2. This allows rules that apply in general, but make exceptions, perhaps for just some attributes, when the class is true.
3. For hover, the styles will shift back and forth as you move the pointer.
[ Pseudo-classes Source ]
There are many other kinds of pseduo classes related to link status (visited or not, etc), languages, multimedia playing status, and form input. We will see some more of these in time, but here is a complete list.
Pseduo-elements
1. Starting with CSS3, some of the pseudo-classes are renamed pseudo-elements.
2. They are properly written with a double colon instead of a single, but you might easily encounter browsers that don't know what you're talking about, so you might need to stick with the single.
3. The difference seems to be that they effectively add tags rather just control display.
  1. ::first-line applies to the first line of text, essentially adding a new tag around that line. (It's anonymous, but would probably be pretty much like span.)
  2. ::first-letter likewise surrounds the first letter.
  3. ::before adds a new tag to the front, which can be filled with content directive:
    p::before { content: "GO" }
    will add the text GO at the front of each paragraph.
[ Pseudo-elements Source ]