Pseudo-classes

Pseudo-classes

//the syntax of pseudo-classes

selector:pseudo-class {
  property:value;
}
//hover over a <div> element to show a <p> element (like a tooltip)

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

Is used to define a special state of an element.

Can be used to style an element when a user mouses over it, style visited and unvisited links differently, style an element when it gets focus.

Anchor Pseudo-classes

/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */
a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
}

a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective.

Pseudo-classes and CSS Classes

a.highlight:hover {
  color: #ff0000;
}

Pseudo-classes can be combined with CSS classes.

Pseudo-classes — Structure map

Clickable & Draggable!

Pseudo-classes — Related pages: