Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements are special "classes" and "elements" that are automatically recognized by CSS-supporting browsers. Pseudo-classes distinguish among different element types (e.g., visited links and active links represent two types of anchors). Pseudo-elements refer to sub-parts of elements, such as the first letter of a paragraph.

Rules with pseudo-classes or pseudo-elements take the form

selector:pseudo-class { property: value; }

or

selector:pseudo-element { property: value; }

Pseudo-classes and pseudo-elements should not be specified with HTML's CLASS attribute. Normal classes may be used with pseudo-classes and pseudo-elements as follows:

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

or

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

Pseudo-classes can be assigned to the A element to display links, visited links and active links differently. The anchor element can give the pseudo-classes link, visited, or active. A visited link could be defined to render in a different color and even a different font size and style.

An interesting effect could be to have a currently selected (or "active") link display in a different colour than the default colours blue and purple. We can also assign what we want to happen when we place the mouse over the top of the link as well. The sample style sheet might look like this:

/*Sets the font for the a (anchor) tag in all styles*/

a {
FONT-SIZE: 8pt; 
FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

/*Sets the colors and styles for an Unvisited Link*/

a:link {
COLOR: #00FF00; 
FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
TEXT-DECORATION: none;
}

/* is setting the currently active link color 
(A link becomes active once you click on it.)*/

a:active {
color: #000000; 
FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif; 
TEXT-DECORATION: none;
}

/*sets the color of a visited link*/

a:visited {
COLOR: #FF0000; 
FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif; 
TEXT-DECORATION: underline;
}

/*sets the color when the mouse hovers over the link*/

a:hover {
COLOR: #6e7e8d; 
FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif; 
BACKGROUND-COLOR: #FFFF00; TEXT-DECORATION: underline overline;
}

The above example was just made to show you the differences between each of the Anchor tags Pseudo elements. Try it in your own web documents to change the way the links work on your page.

FIRST LINE PSEUDO ELEMENT

Quite often in newspaper articles you will see this, the first line of text in an article is displayed in bold lettering and all capitals. CSS has included this capability as a pseudo-element. A first-line pseudo-element may be used in any block-level element (such as P, H1, etc.). An example of a first-line pseudo-element would be:

p.ex:first-line {
font-variant: small-caps;
font-weight: bold
}

Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text

See the whole first line in that paragraph is all in small caps and bolded. We simply used <p class="ex"> to make that paragraph have the desired effect.

FIRST LETTER PSEUDO ELEMENT

The first-letter pseudo-element is used to create drop caps and other effects. The first letter of text within an assigned selector will be rendered according to the value assigned. A first-letter pseudo-element may be used in any block-level element. For example:

p.xe:first-letter { font-size: 300%;}

This gives us a drop cap three times the normal size of the standard font.

Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text

That's the general idea of that one. You can see how the first letter has been multiplied in size compared to the rest of the text, you would no doubt want to play with your font setting on the first letter as well even.