PSEUDO-ELEMENT EXAMPLES

EXAMPLE 1 (::AFTER)

THIS IS A LINK WITH AN ARROW!

EXAMPLE 2 (::BEFORE, ::AFTER)

THIS IS A LINK WITH AN ARROW AND A HEXAGON!

EXAMPLE 3 (::AFTER)

THIS IS A PRINT STYLES LINK!

LINK PSEUDO-CLASSES

:visited pseudo-class

:link pseudo-class

USER ACTION PSEUDO-CLASSES

HOVER pseudo-class

:active pseudo-class

:focus pseudo-class

USER INTERFACE STATE PSEUDO-CLASSES

First Name: Last Name: I own a Firefly-class transport ship

STRUCTURAL AND POSITION PSEUDO-CLASSES

:first-child :last-child and :only-child

This list item is selected by :first-child
his list item is not selected
THIS LISTED LINK IS SELECTED BY :ONLY-CHILD
This list item is selected by :last-child

:first-of-type :last-of-type and :only-of-type

This paragraph is selected by :first-of-type

This paragraph will not be selected

THIS SPAN IS SELECTED BY :ONLY-OF-TYPE

This paragraph is selected by :last-of-type

:nth-child(n) and :nth-last-child(n)

First line of text

Second line of text

Third line of text

Fourth line of text

Fifth line of text

Sixth line of text

:nth-of-type(n) and :nth-last-of-type(n)

First line of text

Second line of text

Third line of text

Fourth line of text

Fifth line of text

Sixth line of text