"CSS" pseudo-class and pseudo-elements

A pseudo class

Grammar:
Selector:pseudo-class {Property:value}

Tip: The pseudo-class name is not case sensitive.

Working with CSS Classes

Selector.class:pseudo-class {Property:value}

Example:
a:link{color: #FF0000}/* Links not visited */
a:visited{color: #00FF00}/*-Visited link */
a:hover{color: #FF00FF}/* Mouse moves to link */
a:active{color: #0000FF}/* Selected link */

Tip: In CSS definitions, a:hover must be placed after A:link and a:visited to be valid.
Hint: In the CSS definition, a:active must be placed after a:hover to be valid.

Pseudo-Class:

: visited pseudo-class-adds a style to a link that has been visited. : Link pseudo-class-adds a style to a link that has not been accessed. : hover pseudo class-adds a style to an element when the mouse hovers over it. : Active pseudo-class-adds a style to the element being activated. : First-child pseudo-Class-selects the first child element of an element. : Focus pseudo-class-adds a style to an element that has keyboard input focus. : lang Pseudo class-defines special rules for different languages.

Two pseudo elements

Grammar:

selector:pseudo-element {property:value;}

Tip: The pseudo-class name is not case sensitive.

Use with CSS classes:

Selector.class: pseudo-element {Property:value}

Example:
P:first-letter
{
  Color: #ff0000;
  Font-size:xx-large;
}

p:first-line{
Color: #0000ff; Font-variant:small-caps; }

: First-letter pseudo-element-adds a special style to the first letter of the text. : First-line pseudo-element-adds a special style to the first line of text. : Before pseudo-element-adds content before the element. : After pseudo element-adds content after the element.

"CSS" pseudo-class and pseudo-elements