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

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:

a.light:hover {
    color: lightblue;
}

Styling links in specific states

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

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

/* 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:

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.

: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:

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:

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

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

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":

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

Cheatsheet of pseudo classes

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.