CSS: Pseudo-Classes and Pseudo-Elements

Pseudo-Classes and Pseudo-Elements don't exist in the HTML source! What I mean? Well, they are 'inserted on fly' by the web browser under certain conditions. Take links for example: they can be unvisited, visited or active. So, if you write:

a:link { color : blue }
a:visited { color : pink }
a:active { color : red }

Well, as you read an HTML document, all link could be blue (because they are all unvisited links). However, as soon as you click on a link, it will turn to red, and you will go to another HTML document (by following that link). Now, if you go back to the starting page, you will notice that link will be pink. What's happen? Well, the web browser is aware that link status can change, and it notice when a particular link change: in this case, the link now is a visited link. So the web browser will apply 'on fly' classes to links. This behavior is called 'fictional tag sequence'. Therefore visited is a Pseudo-Class.

Pseudo-Elements aren't real HTML elements: they are typographical items that can be addressed through pseudo-elements. These Pseudo-Elements are: 'first-line':

<body><p>This is the first line and...

...this is the second line...</p>

And 'first-letter':

<body><p>This is a simple line...</p>