🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

CSS Pseudo Class Explained: Learn to Define States of HTML Elements

Reading time 5 min
Published Nov 5, 2016
Updated Jan 21, 2020

TL;DR – CSS pseudo classes style elements in special states, positions, according to parent-child relationships, or elements affected by other external conditions.

Hover Over Me

Defining pseudo classes

  • The CSS pseudo class indicates a specific state of an element.
  • You can combine selectors with pseudo classes.
  • By using a pseudo class selector, you can add styles to HTML elements when they enter specific states.

Pseudo classes in CSS help to add styling properties to elements according to their state. A very common practice is giving effects to links for when users hover, click or visit URLs.

Note: a pseudo class helps to style elements under specific conditions. Positions and states cannot be expressed with a standard selector.

This is the syntax you need for using pseudo classes.
selector:pseudo-class {    
property:value;
}

Combining pseudo classes with CSS classes

It is possible to combine pseudo classes and regular CSS classes. This combination lets you style elements that have specific classes and also react to certain external factors.

The example below assigns a style for the <a> element with a light class for when the :hover pseudo class activates on it:

Example
a.light:hover {
    color: lightblue;
}

Defining properties for links in certain states is one of the uses of CSS pseudo classes. There are four states of a link:

Pseudo class Definition
:link Specifies a link that hasn't been opened yet. It only matches links with href attribute.
:visited Specifies a link that has been visited.
:hover Specifies a link that reacts once you hover your mouse over it.
:active Specifies a link that is currently open.

The example below assigns all four pseudo classes to the HTML <a> element:

Example
/* A link that has not been visited will be blue */
a:link {
    color: blue;
}

/* A visited link will be purple */
a:visited {
    color: purple;
}

/* A link that is hovered on will be light blue*/  	
a:hover {
    color: lightblue;
}

/* A selected link will also be light blue */
a:active {
    color: lightblue;
}

Remember: a:hover has to go after a:link and a:visited when defining it in CSS. a:active has to go after a:hover.

:hover

The :hover pseudo class activates when users move their mouse pointer over a link but might not even click the URL.

This example changes the background-color of a link when :hover triggers:

Example
p:hover {
    background-color: lightgreen;
}

You can change not only backgrounds but add link colors, text decorations, set opacity, and other CSS properties.

Note: the :hover pseudo class has some problems with touchscreens. This class can trigger only for a moment or can continue to work for longer than necessary.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

:first-child

CSS offers structural pseudo classes designed for selecting elements according to their relationships to other elements.

The :first-child pseudo class finds elements that are the first children of specified parents:

Example
p:first-child {
   color: lightgreen;  
}

In the example below, the pseudo class in CSS will match the first child <i> element in every parent <p> element:

Example
p i:first-child {
   color: lightblue;  
}

The following example selects the first <p> element and styles all <i> elements inside it:

Example
p:first-child i {
   color: lightblue;  
}

:lang

The pseudo class :lang selects elements according to the language attributes they have.

The example below shows how :lang defines the quotation marks for the <q> element with lang="it":

Example

q:lang(it) {    
   quotes: "~" "~";
} 

Cheatsheet of pseudo classes

Selector Description
:active Select the active link
:checked Select elements that are checked
:disabled Select elements that are disabled
:empty Select elements that have no children
:enabled Select elements that are enabled
:first-child Select elements that are the first children of their parents
:first-of-type Select elements that are the first specified elements of their parents
:focus Select elements that are focused
:hover Selects link on mouseover
:in-range Selects elements that have a value within a specified range
:invalid Selects elements that have an invalid value
:lang(language) Selects elements that have a lang attribute value starting with it
:last-child Selects elements that are the last children of their parents
:last-of-type Selects elements that are the last specified elements of their parents
:link Selects each unvisited link
:not(selector) Selects elements that do not match the selectors
:nth-child(n) Select elements according to their position in a group of siblings
:nth-last-child(n) Selects elements according to their position in a group of siblings (counting from the end)
:nth-last-of-type(n) Selects elements of a specified type according to their position in a group of siblings (counting from the end)
:nth-of-type(n) Selects elements of a specified type according to their position in a group of siblings (counting from the end)
:only-of-type Selects elements that have no siblings with the same type
:only-child Selects elements that are the only children of their parents
:optional Selects elements that do not have the required attribute
:out-of-range Selects elements that have bigger values than specified in the range
:read-only Selects elements that have a readonly attribute
:read-write Selects elements that do not have a readonly attribute
:required Selects elements that have a required attribute
:root Selects the root elements of a file
:target Selects the currently active element (i.e., a URL containing that anchor name)
:valid Selects all elements that have a valid value
:visited Selects each visited link

CSS pseudo classes: useful tips

  • Pseudo elements style certain parts of HTML elements. For instance, you can add styles to the first letters in a paragraph by using ::first-letter.
  • You can use pseudo classes and elements together with the jQuery selectors. In fact, jQuery offers a few more.