Blog: Pseudo-Classes and Pseudo-Elements

Pseudo-Classes

Pseudo-classes define elements with special states. Different types of elements work with specific types of pseudo-classes. Anchor elements can take pseudo-classes for visited links, unvisited links, hovered-over, and active states. Pseudo-classes can also check for different states in form elements and even a few for plain text elements. Pseudo-classes are useful for building interactive buttons and links that provide visible feedback when users interact with certain elements on a web page.

Pseudo-Class Syntax

[element]:[pseudo-class]{

}                
            

Pseudo-Class Examples

a:visited{
    color: black;
}

div a:hover{
    color: black;
}

.checkbox:selected {
    color: black;
}
            

Pseudo-Elements

Pseudo-elements are special selectors that can target specific parts of an element rather than the entire element, which wouldn’t be possible using normal selectors. This allows somebody to modify only a component part of the contents of an element rather than separating an element into separate elements to format them differently. Pseudo-elements provide a lot of granular control to developers and designers and allow stylesheets to reach greater precision in what they can target.

Pseudo-Element Syntax

[element]::[pseudo-element]{

}
            

Pseudo-Element Examples

pre::first-line{
    color: black;
}

p::first-letter{
    color: black;
}

ul.body::marker{
    color: black;
}