Pseudo-classes

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(3) matches when it is the third child (numbering from 1).
4. selector:nth−child(even), matches an element if it is an even child of its parent, that is, the second, fourth, sixth, etc. Also odd.
5. selector:nth−child(A n + B),
  1. where A and B are integer constants, and n is just the letter n.
  2. matches any child whose 1-based position number is equal to A n + B for some non-negative n.
  3. div:nth-child(2n+1) is the same as odd, for instance.
6. 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. There are many others.
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 ]