Using pseudo-classes along with an element allows you to select a special state for that element for specific targeting.

Example:

a:hover {text-decoration:none;background-color:#FFF673 }
td:first-child {font-weight: bold;}

The first example will look for all <a> tags while the visitor has the cursor over that element and remove the default underline for a hover state but add a yellow highlighted background. The second example will look for the <td> tags in a table, but style only the first one in a <tr>  row of a table. The result will be that the first column of the table will have a bold font-weight.

The Pseudo Classes

:active
:checked
:default
:dir()
:disabled
:empty
:enabled:first
:first-child
:first-of-type
:fullscreen
:focus
:hover
:indeterminate

:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-child-last-of-type
:nth-of-type()
:only-child
:only-of-type

:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited

 

Not all pseudo-classes are recognized by all browsers, especially older browser versions.