Link pseudo-classes

SPACEBAR to move forward through slides.

SHIFT & SPACEBAR to move backwards through slides.

LEFT ARROW & RIGHT ARROW to move through sections.

ESC to see overview and ESC again to exit.

F to enter presentation mode and ESC to exit.

Introduction

Pseudo-classes (or “fake” classes) allow you to style specific attributes or states that do not exist in the document tree.

The :link pseudo-class selector is written using an element, followed by ":", followed by "link".


/* syntax */
E:link { }

/* example */
a:link { }

Whitespace is not permitted within the selector.


/* Valid */
a:link { }

/* Invalid */
a :link { }

The :link pseudo-class selector targets any link that is defined as “unvisited”.

W3C Selectors Level 4
Status: Working Draft

Selectors Level 3
Status: Recommendation

CSS Level 2 (Revision 1)
Status: Recommendation

The :link pseudo-class selector is well supported across all modern browsers.

Write a CSS rule to style the <a> element to be color: lightsalmon.


/* Add styles here */
a:link {
  color: lightsalmon;
}

Check your work against the finished HTML file:
exercises-finished/exercise-205-03-01.html

The :visited pseudo-class selector is written using an element, followed by ":", followed by "visited".


/* syntax */
E:visited { }

/* example */
a:visited { }

Whitespace is not permitted within the selector.


/* Valid */
a:visited { }

/* Invalid */
a :visited { }

The :visited pseudo-class selector targets any link that is defined as “visited”.

Due to potential security issues, there are only a few properties that you can use to style visited links.

These include color, background-color, border-color, outline-color, fill, and stroke.

You can read more about potential security issues: Article 1, Article 2, Article 3.

W3C Selectors Level 4
Status: Working Draft

Selectors Level 3
Status: Recommendation

CSS Level 2 (Revision 1)
Status: Recommendation

The :visited pseudo-class selector is well supported across all modern browsers.

Write a CSS rule to style the <a> element to be color: mediumvioletred, but only when it is the visited state.


/* Add styles here */
a:visited {
  color: mediumvioletred;
}

Check your work against the finished HTML file:
exercises-finished/exercise-205-03-01.html