CSS Pseudo Classes

What is Pseudo Classes?

A pseudo-class can be defined as a keyword which is combined to a selector that defines the special state of the selected elements. It is added to the selector for adding an effect to the existing elements based on their states. For example, The ":hover" is used for adding special effects to an element when the user moves the cursor over the element.

Pseudo-classes are unique keywords in CSS that target states or elements depending on their location or user interaction. They enable you to style inaccessible elements using just standard class ID selectors.

NOTE: The names of the pseudo-class are not case-sensitive.

Syntax

A pseudo-class starts with a colon (:). Let's see its syntax.

selector: pseudo-class {
  property: value;
}

A colon follows the keyword to indicate pseudo-classes. Listed below are some popular pseudo-classes:

:active: Applies styles when an element is activated by the user, such as clicking a button.
:hover: Applies styles when the mouse pointer is over an element.
:focus: When an element receives focus, such as when an input field is selected, the styling property :focus is applied.
:first-child: Selects the first child element of its parent; last-child - Selects the last child element of its parent; visited - Applies styles to links the user has visited.
:nth last child(n): Selects elements that fall into a particular numerical pattern, such as every second or third child, using the :nth-child(n) function.
:nth-of-type(n): Chooses elements of a particular type that adhere to a predetermined pattern of numbers.
:nth-last-of-type(n): It selects elements of a particular type that match a numerical pattern, counting from the end. :nth-last-child(n) selects elements that match a specific numerical pattern, starting at the end.

Many more Pseudo classes are available in CSS, just a few examples. Pseudo-classes are effective tools that let you target and style particular elements depending on their status or position, improving your web pages' visual appeal and interactivity.

Let's discuss the above pseudo-classes, along with an example.

:hover pseudo-class

This pseudo-class adds a special style to an element when the user moves the cursor over it. If you want to make it effective, it must be applied after the ":link" and ":visited" pseudo-classes.

Example

<html>
   <head>
      <style>
         body{
	 text-align:center;
	 }
	 h1:hover{
	 color:red;
	 }
	 h2:hover{
	 color:blue;
	 }
      </style>
   </head>

   <body>
      <h1>Hello world </h1>
	  <h2>This is an example of :hover pseudo class</h2>
   </body>
</html>

Test it Now

:active pseudo-class

It applies when the elements are clicked or activated. It selects the activated element.

We can understand it with the example given below.

Example

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
	body{
	text-align:center;
	}
    a:active{ 
        color: yellow; 
    } 
    h1, h2, h3{ 
        color:red; ; 
    } 
    </style> 
</head> 
  
<body> 
    <h1>Hello World</h1> 
    <h2>The :active pseudo-class</h2> 
	<h3>Click the following link to see the effect</h3>
    <a href="#">Click the link</a>
</body> 
</html>

Test it Now

:visited pseudo-class

It selects the visited links and adds special styles to them. Its possible values can be any color name in a valid format.

Example

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
	body{
	text-align:center;
	}
    a:visited{ 
        color: red; 
    } 

    </style> 
</head> 
  
<body> 
    <h1>Hello World</h1> 
    <h2>The :visited pseudo-class</h2> 
	<h3>Click the following link to see the effect</h3>
    <a href="#">Click the link</a>
</body> 
</html>

Test it Now

:lang pseudo-class

It is helpful in documents that require multiple languages. It allows us to define special rules for different languages.

Example

In this example, we specify p:lang(fr) which selects the elements having attribute lang="fr".

<!DOCTYPE HTML>
 <html>
  <head>
    <style>
	body{
	text-align:center;
	}
       p:lang(fr)
    {
        font-family:Verdana;
        color:blue;
		
    }
   </style>
 </head>
<body>
  
  <p>Without :lang pseudo class</p>
  <p lang="fr">With :lang pseudo class with the value fr</p>
</body>
</html> 

Test it Now

:focus pseudo-class

It selects the elements that are currently focused on by the user. It is generally used in input elements of the forms and triggers when the user clicks on it.

Example

<!DOCTYPE HTML>
<html>
  <style>
  form{
  text-align:center;
  }
  input:focus{
         border:5px solid lightblue;
         box-shadow:10px 10px 10px black;
         color: blue;
         width:300px;
		 }
   </style>
 <body>
  <form>
    <h1>Name: <input type="text" value="Enter your name"></h1>
   </form>
</body>
</html>

Test it Now

:first-child pseudo-class

It matches a particular element, which is the first child of another element and adds a special effect to the corresponding element.

Note: We have to declare a <!DOCTYPE> at the top of the document to make ":first-child" pseudo-class to work in IE8 and its earlier versions.

The following illustration explains it more clearly.

Example

<!DOCTYPE HTML>
<html>
   <head>
      <style>
          h1:first-child {
            text-indent: 200px;
	color:blue;
         }
      </style>
   </head>

   <body>
   
      <div>
         <h1>It is the first heading in div. It will be indented, and its color will be blue.</h1>
         <h1>It is the Second heading in div, which will not be affected.</h1>
      </div>
   </body>
</html>

Test it Now

The simple tooltip hover

A tooltip specifies extra information about something when the user moves the cursor over the element. Let's create a tooltip by using the ":hover" pseudo-class.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
h2{
  display: none;
  background-color: red;
  color:white;
  padding: 20px;
}
div{
font-size:40px;
}
div:hover h2 {
  display: block;
}
</style>
</head>
<body>
<h1>Move your mouse to the below text to see the effect</h1> 
<div>Hello World
  <h2>Welcome to the javaTpoint</h2>
</div>

</body>
</html>

Test it Now

CSS classes and pseudo-classes

The classes in CSS can be combined with pseudo-classes. We can write it as-

Syntax

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

We can understand it with the following example.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
div.hello:hover {
  color: red;
  font-size:40px;
} 
</style>
</head>
<body>
<h1>CSS Classes and pseudo-classes</h1>
<h2>Move your cursor to the below text</h2>
<div class="hello">Hello World</p>

</body>
</html>

Test it Now

Why We Use Pseudo Classes in CSS?

CSS pseudo-classes are used to choose and style elements according to circumstances or states. They offer a way to apply styles to inaccessible elements using standard class or ID selectors. Pseudo-classes are frequently used in CSS for the following reasons:

Increasing interactivity: Pseudo classes allow you to style elements in response to user actions like hovering over, selecting, or concentrating on an input field. Doing this can increase your website's or application's interactivity and provide visual feedback.
Styling specific elements: Targeting specific elements within a larger set based on their location or characteristics is possible with pseudo-classes. For instance, you can target only visited links, style the first or last child of a parent element, or choose elements based on their index.
Styling from elements: Pseudo classes are beneficial for styling form elements. When input fields are the focus or when they are in a particular state, such as checked or disabled, you can style them. You can design forms this way that are both aesthetically pleasing and user-friendly.
Adding dynamic effects: To add dynamic effects to your website, combine pseudo-classes with JavaScript, animations, and transitions. For instance, you can animate the appearance of a tooltip when an element is clicked or change the background color of a button when it is hovered over.
Enhancing accessibility: By giving visual cues and feedback to users who rely on assistive technologies, pseudo-classes can help your website become more accessible. You can simplify it for users who use the keyboard to determine which element is currently focused by styling the:focus state of form elements.

Limitation of Pseudo Classes in CSS

Here are the following limitations of pseudo-classes in CSS:

Limited functionality: Pseudo classes have predefined behaviours and are intended to target particular conditions or states of elements. They might not give you the customization or control required for complex interactions or styling needs. In these circumstances, JavaScript or other methods might be required to achieve the desired functionality.
Lack of support for older browsers: The older versions of some browsers may only partially support some of the newer or less frequently used pseudo-classes, although most modern browsers support pseudo-classes. To ensure consistent behaviour, it's crucial to consider cross-browser compatibility and test your CSS code in various browser iterations.
Lack of dynamic selection: Elements' initial states or properties determine the pseudo-classes. They don't update themselves in response to DOM changes or user interactions. For instance, the pseudo-classes might not apply or remove styles appropriately if you add or remove elements from the page dynamically. JavaScript or other scripting languages typically handle dynamic selection and styling.
Considerations for cascading and specificity: Pseudo classes have specificity rules, which occasionally clash with other CSS rules. You might run into specificity problems that interfere with the intended styling if you use multiple selectors to target the same element with various pseudo-classes. You can lessen this restriction by properly comprehending CSS specificity and organizing your styles.

Next TopicCSS Pseudo-elements

← prev next →