Coding Basics II

Lesson 6

CSS Pseudo Classes

Prerequisites

A basic knowledge of HTML and CSS.

Objective

To learn how to use Pseudo class selectors to change specific child elements with CSS.

Terms

Pseudo Class

A pseudo-class is used to define a special state of an element.

:first-child

Chooses every element that is the first child of its parent.

:nth-child(#)

Selects every element that is the # child of its parent element.

:first-of-type

Selects every element that is the first element of its parent.

:nth-of-type(#)

Selects every element that is the # element of its parent, counting from the last child.

:not

Selects every element that is not a specified element

:last-child

Selects every element that is that last child of the parent element.

content

Adds content when using a :before or :after.

:before

Inserts content before the content of every selected element.

:after

Inserts content after the content of every selected element.

Example

Bellow you will see two UL's. The first one which has a :before attached to it with a content of a dollar sign and a color of white.

The other UL has an :after attached to it with a content of SALE YO and a color of orange.

  • 5.00
  • 7.50
  • 9.50
  • 8.50
  • 10.50

Try It Yourself!

For your own example I ask you to follow the steps bellow.

First: Find the .prices li:before{ and change the color to one of your choosing.

Second: Find .sale li:after{ and change the content to something such as clearance.

Finally: Add some of your own styles to the :before and/or :after and see what you can make.


Test Your Knowledge Here!