CSS Tutorial

CSS Pseudo-Classes Selectors

Pseudo-class Selectors are CSS Selectors that starts with colon (:). They are applied as a result of user's interaction such as:

  • Changing an element style when a user mouses over it
  • Clicking or setting focus on an element (focus)
  • Styling element during the moment a user mouses-down and mouses-up on it.

How to Write a Pseudo-class Selector

selector:pseudo-class {
  propertyName : value;
}

Links Related Pseudo-classes

Links can be displayed in different ways using pseudo-class selectors.
Pseudo-classes can be combined with CSS classes:

Example

/* unvisited link */
a:link {
  color: #FFFFFF;
}
/* visited link */
a:visited {
  color: #00FF00;
} 
/* mouse over link */
a:hover {
  color: #0000FF;
} 
/* selected link */
a:active {
  color: #666666;
}
Note: The a:hover selector MUST be declared after the a:link and a:visited selectors to make it work, a:active selector MUST be declared after a:hover selector to work!
  Do It yourself
a

Combining Pseudo-classes and CSS Classes

Pseudo-classes can be combined with CSS classes to perform user-triggered actions.

Example

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

The above example changes the text color of an <a> element with class="services" to "green" when a user mouses over it.

  Do It yourself

Combining Pseudo-classes and CSS Ids

Pseudo-classes can be also combined with CSS Id selectors to perform user-triggered actions.

Example

a#menu:hover {
  color: #FF00FF;
}​

The above example changes the text color of an <a> element with id="menu" to "green" when a user mouses over it.

  Do It yourself

The :first-child Pseudo-class

The :first-child pseudo-class affects a specified element that is the first child of another element.
This declaration matches all occurrences in the document, not only one.

The example below changes the color of a <div> that is the first child of another element to "yellow".

Example

div:first-child {
  color: yellow;
}​
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
  Do It yourself

The :last-child Pseudo-class

The :last-child pseudo-class affects a specified element that is the last child of another element.
This declaration matches all occurrence in the document, not only one.

The example below changes the color of a <div> that is the last child of another element to green.

Example

div:last-child {
  color: green;
}​
Note: For :last-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
  Do It yourself

The :nth-child(n) Pseudo-class

The :nth-child(n) pseudo-class affects a specified element that is the nth child of another element. Where "n" is the number of the element position in its containing (parent) element.
This declaration matches all occurrence in the document, not only one.

The example below changes the color of a <div> that is the fourth child of another element to "red".

Example

div:nth-child(4) {
  color: red;
}
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
  Do It yourself
a

The :nth-child(even) Pseudo-class

The :nth-child(even) pseudo-class affects a specified element that is having an even number child position in another element.
This declaration matches all in the document, not only one.

Assuming we are having a <div> element that is four <p> child elements in it. The example below changes the color of the second and fourth <p> elements which are having even positions (two and four) to "green".

Example

p:nth-child(even) {
   color: green;
}
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
  Do It yourself

The :nth-child(odd) Pseudo-class

The :nth-child(odd) pseudo-class affects a specified element that is having an even number child position in another element.
This declaration matches all occurrence in the document, not only one.

Assuming we are having a <div> element that is four <p> child elements in it. The example below changes the color of the second and fourth <p> elements which are having odd positions (1 and 3) to "green".

Example

div:nth-child(odd) {
  color: green;
}
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
  Do It yourself

What You Should Know at the End of This Lesson

  • You should be able to tell briefly what CSS Pseudo-class is all about.
  • You should be able to identify the four (4) kinds of link related Pseudo-classes.
  • You should be able to style elements based on their positions in their parent element using pseudo-class selectors.
  • If you enjoy this tutorial, you should be able to share.

Related Chapters

Related Examples