What Are CSS Pseudo Classes and What Are They Used For?

Follow us on LinkedIn for our latest data and tips!

, ,

What Are CSS Pseudo Classes and What Are They Used For?

A CSS pseudo class allows you to assign a specific state to an element. For instance, a user hovers over an image on a web page and it changes to another image. Links change colors once they are visited and can be differentiated from unvisited links. An input box on a form is disabled and does not take a value.  These actions and more are made possible by pseudo classes. Normal CSS classes can also be used with pseudo classes. CSS3 has added more pseudo classes than was previously available in CSS2. A pseudo class is tacked onto a selector. It is preceded by a colon and usually followed by a property with a value in parenthesis. The syntax of a pseudo class is as follows

selector: pseudo-class { property:value;}

Basic Pseudo Classes

There are many different pseudo classes, the code example below demonstrates some of the most basic ones. These are classified as dynamic pseudo classes which change due to the user’s actions. In the code example the :link pseudo class is used to set the color of a link to blue. Once the user has visited the link, the :visited pseudo class is used to change the color of the link to maroon. Also demonstrated is :hover which is used to change the purple circle with white text into a pink square with yellow text when the user hovers over the image. The :focus pseudo class changes the date entry field to gray when the user clicks or “focuses” on it. Copy and paste the code example here to try it out for yourself!

<!DOCTYPE html>










div {

   background-color: purple;

   color: white;






   -moz-border-radius: 100px;

   -webkit-border-radius: 100px;

    border-radius: 100px;


div:hover {





   -moz-border-radius: 0px;

   -webkit-border-radius: 0px;

   border-radius: 0px;


input:focus {

   background-color: lightgray;





<p><b><a href="https://appendtonew.wpengine.com/" target="_blank">Click on this link!</a></b></p>

<div>Hover over this</div>

<p><b>Enter todays date in the field below</b></p>


Date: <input type="text" name="Date"><br>




Some more Pseudo Classes

Listed below are a few more commonly used pseudo classes. A comprehensive list of all the pseudo classes can be found here.

:first-child- This class allows you to add a specific style to elements that are the first child of their parent element.  

:root- This pseudo class is used to match the document’s root element.

:lang- Different languages have differing rules and conventions. Sometimes you need to create pages that are used by multiple languages. The :lang pseudo class is useful for this situation. It looks at mainly the lang=” “ HTML attribute and  <meta> element and matches elements accordingly.  

:disabled- This allows you to indicate disabled input elements such as text fields and buttons.

:fullscreen- Elements that are in full screen mode are used by this pseudo class.

Pseudo Elements

Pseudo elements have similar functionality to pseudo classes in that they can be styled by CSS and are added by user agents. However they are different from pseudo classes because they allow you to work with elements that don’t exist in the DOM. The syntax identifier for pseudo elements is usually double colons instead of the single colon like for pseudo classes. Common pseudo elements are ::before, ::after and ::first-line. It is important to note that some coders use the single colon : for pseudo elements which was the convention in CSS2. Keep this difference in mind to avoid confusion between pseudo classes and pseudo elements.


Pseudo classes make it possible to apply special states to elements. They allow developers to create cool effects without having to use a scripting language such as JavaScript. There are many different types of pseudo classes that allow you to make your page more interactive and fun while keeping the code simple.