(click anywhere to close)
OPEN MENU

[CSS3] Pseudo-Classes

category: Website | course: CSS3 | difficulty:

Pseudo-classes are a very powerful feature of CSS. Basically, they are an extra component you can add to a selector, that selects a group of elements dynamically. This means that it creates a class based on which state an element is in, which can be used, for example, to style elements differently when the user hovers over them.

The syntax for pseudo-classes is :pseudo-class – note the colon – and can be used in a selector just like any other component.

Hover/Mouse Over

To apply a different set of styles when the user hovers over the element, you can use the :hover pseudo-class. Most commonly used with links, but can be applied to anything.

a:hover {
	color:red;
}

Links

Because links take time to load, it is useful to style them differently when they are being clicked. That’s when you use :active.

a:active {
	border-bottom: 2px solid purple;
}

Similarly, because the text inside anchor tags can change, it’s useful if you can show the user if he has already visited a certain link. The :link pseudo-class selects all unvisited links, while :visited selects all the visited ones.

a:link {
	color:blue;
}
a:visited {
	text-transform:uppercase;
}

Input

The input element is, of all elements, by far the most subject to change, and therefore has its own set of pseudo-classes.

Pseudo Class

Description

:checked

Selects every checked input element

:disabled

Selects every disabled input element

:enabled

Selects every enabled input element

:focus

Selects the input element that has focus

:in-range

Selects all input elements with a value within a specified range

:invalid

Selects all input elements with an invalid value

:optional

Selects all input elements with no “required” attribute

:out-of-range

Selects input elements with a value outside a specified range

:read-only

Selects all input elements with a “readonly” attribute specified

:read-write

Selects all input elements with no “readonly” attribute specified

:required

Selects all input elements with a “required” attribute specified

:valid

Selects all input elements with a valid value

All Pseudo-Classes

The remaining pseudo-classes are all about selecting elements based on their type, position relative to their parent, and contents. Especially useful, I think, is the first one.

Pseudo Class

Description

:not(selector)

Negates the selector within.

For example, you could select all paragraph tags that don’t have the a certain class.

:empty

Selects every empty element, i.e., element with no children

:first-child

Selects every element that is the first child of its parent

:first-of-type

Selects every element that is the first child of its parent of its own type.

:last-child

Selects every element that is the last child of its parent

:last-of-type

Selects every element that is the last child of its parent of its own type.

:only-child

Selects every element that is the only child of its parent

:only-of-type

Selects every element that is the only child of its parent of its own type.

:nth-child(n)

Selects every element that is the nth child of its parent

:nth-of-type(n)

Selects every element that is the nth child of its parent of its own type.

:nth-last-child(n)

Selects every element that is the nth child of its parent, counting from the end to the start.

:nth-last-of-type(n)

Selects every element that is the nth child of its parent of its own type, counting from the end to the start.

:root

Selects the document’s root element.

For HTML documents, this will always be <html>, but CSS can also be used for other markup languages!

:target

If a link points to an element on another page, using #someanchor, this selects that part of the page that was linked to.

The nth-child selectors are very powerful, as you can input any formula you like. For example, 2n selects all even-numbered children. But, that is a bit too advanced to cover in this basic CSS course ;)

CONTINUE WITH THIS COURSE
Test your knowledge with the quiz!
What happens when you use the :checked pseudo-class?
A
You select all input elements with valid input
B
You select checkboxes that are checked
C
You select all elements that are the last child of another element
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)