CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Pseudo Classes

A pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).

For example, :hover can be used to change a button's color when the user hovers over it.

Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements).

Syntax:
selector:pseudo-class {
     property: value;
}

The :hover Pseudo-class

The :hover pseudo-class matches when the user hovers over an element with the cursor (mouse pointer).

Run code

Anchor Pseudo-classes

Hyperlinks can be displayed in different ways:

Run code

Note: To make these pseudo-classes work perfectly, you must define them in the exact order - :link, :visited, :hover, :active



The :focus Pseudo-class

The :focus pseudo-class represents an element (such as a form input) that has received focus.

It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's tab key.

Run code

The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of another element.

Run code

The :last-child Pseudo-class

The :last-child pseudo-class matches a specified element that is the last child of another element.

Run code

The :nth-child() Pseudo-class

The :nth-child() pseudo-class matches elements based on their position in a group of siblings.

Run code

Pseudo-classes and CSS Classes

Pseudo-classes can be combined with CSS classes.

In this example when you hover over a DIV with class="heavy", it will change color and boldness:

Run code

CSS Pseudo Classes

Below down is a list of all pseudo-classes:

Selector Example Description
:active a:active Selects the active link
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
:empty div:empty Selects every <div> element that has no children
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> elements that is the first child of its parent
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the <input> element that has focus
:hover div:hover Selects a <div> on mouse over
:in-range input:in-range Selects <input> elements with a value within a specified range
:invalid input:invalid Selects all <input> elements with an invalid value
:last-child p:last-child Selects every <p> elements that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
:not() :not(p) Selects every element that is not a <p> element
:nth-child() p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child() p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type() p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type() p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:optional input:optional Selects <input> elements without required attribute
:out-of-range input:out-of-range Selects <input> elements with a value outside a specified range
:read-only input:read-only Selects <input> elements with a readonly attribute specified
:read-write input:read-write Selects <input> elements without readonly attribute
:required input:required Selects <input> elements with a required attribute specified
:root root Selects the document's root element
:valid input:valid Selects all <input> elements with a valid value
:visited a:visited Selects all visited links