Pseudo-classes and Pseudo-elements in CSS

As CSS gains in popularity for its numerous advantages in constructing layout, it is important that as a designer, you get your head around some of the fundamental elements of cascading style sheets.  Pseudo-classes and pseudo-elements, are necessary concepts to understand when developing a website, using CSS.

The main reasons for this, is that pseudo-classes and pseudo-elements, provide the capability for manipulating text in a paragraph, and can do this to the individual letter.  This creates numerous possibilities for creativity in terms of style, feel, and appearance, as well as opening possibilities for better navigation in a website.
CSS supporting browsers, automatically recognise the special “classes”, and “elements”, that are pseudo-classes and pseudo elements.  Incidentally, the browser recognition is not part of the markup language, but instead the responsibility of the browser to get to the elements.  In a nutshell, pseudo-elements refer to sub-parts of an element, such as the a particular letter in a paragraph, and, pseudo classes, distinguish different  types of elements.  An example here could be, active and visited links.(Both are two types of anchor links).

Pseudo-elements and pseudo classes rules are shown below:

 selector :pseudo-class {property:value}
Or
selector: pseudo-element {property :  value}

Pseudo-elements and pseudo-classes do work with normal classes.  See below:

 selector.class  :  pseudo-class { property : value }
Or
selector.class : pseudo-element {property : value}

 Pseudo-elements and pseudo classes, should not be specified with HTML’s CLASS attribute.

 Anchor Pseudo-classes can display certain types of links differently, when they are assigned to an element.  For the example below, we’ll call this element A.  The links they can effect are links, visited links, and active links.  These can be manipulated to be shown in a different color, font size, or style.
One idea, is to display a selected or active link, in a different color and size.  This effect is cancelled, once the page is reloaded, as the color and font size returns to its original style.
The resulting style sheet could look like this.
A:link     {color:red}
A:active  {color:blue; font-size:115%}
A:visited {color:green; font-size:80%}

CSS1 has the capability to display, and manipulate text, as pioneered in publications such as the Wall Street Journal.  So, it is possible to create the first line of text in block capitals and bold lettering.  This technique in CSS circles, is knows as first-line pseudo –element.  It may be used in any block-level element.  An example is shown below.
P:first-line{
Font-variant:small-cape;
Font-weight:bold   }
It is also possible to manipulate the first letter to create effects such as drop caps.  This is known as first-letter pseudo-element.  As with the first-line pseudo-element, it may be used in any block-level element, and basically, it renders the first letter of text within an assigned selector, according to the value assigned.  For example:
P:first-letter  {font-size:300%; float:left}.

This creates a drop cap three times the normal font size.
It is important to remember that not all CSS properties can be used with pseudo-elements, and that the browser version can limit how CSS is displayed. 
The properties that can be used with first-line pseudo-elements, are background properties, font properties. letter-spacing, word-spacing, clear, text-shadow, line-height, text- transform, vertical-align and text-decoration.
First-line pseudo-elements and to a lesser degree first-letter pseudo-elements, will be fundamental to most layouts, as it gives the capability to manipulate text in such a way, as to draw the readers attention to it.  So it is important therefore, to understand how this concept works.
By mastering the art of pseudo-elements and pseudo classes, you will be able to better design websites, and this will ultimately, bring its own rewards, such as recognition, satisfaction, employment, and enjoyment.