CSS Tutorial
CSS Properties
CSS Advance
CSS Design
CSS Questions
Miscellaneous
CSS MCQ
- css-mcq
Interview Questions
- css-interview-questions

CSS 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.

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;
}

Although there are various CSS pseudo-classes, here we are going to discuss some of the most commonly used pseudo-classes. The widely used CSS classes are tabulated as follows:

pseudo-class	Description
:active	IIt is used to add style to an active element.
:hover	IIt adds special effects to an element when the user moves the mouse pointer over the element.
:link	IIt adds style to the unvisited link.
:visited	IIt adds style to a visited link.
:lang	IIt is used to define a language to use in a specified element.
:focus	IIt selects the element which is focused by the user currently.
:first-child	It adds special effects to an element, which is the first child of another element.

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

Next TopicCSS Pseudo-elements

← prev next →

Hot Tutorials

Contact US

Email:[email protected]

CSS pseudo-classes

10/30

CSS Tutorial

CSS Properties

CSS Advance

CSS Design

CSS Questions

Miscellaneous

CSS MCQ

Interview Questions

CSS pseudo-classes

Syntax

:hover pseudo-class

Example

:active pseudo-class

Example

:visited pseudo-class

Example

:lang pseudo-class

Example

:focus pseudo-class

Example

:first-child pseudo-class

Example

The simple tooltip hover

Example

CSS classes and pseudo-classes

Syntax

Example

Hot Tutorials

Contact US