Pseudo-Class in CSS

Pseudo-Class in CSS is used to add special effects to some Selector without using JavaScript or any Script language. For example, write CSS to change the color of links when you hover over, change an element's attribute when clicked, format the path when it has not been clicked .

Syntax

The simple syntax for Pseudo-Class in CSS is:

 selector:pseudo-class { 
  property:value; 
 } 

Pseudo-Class for the link

The Pseudo-Class is most often used with links (tags) to create an effect that changes the text state every time the user moves the mouse over it.

There are 4 states equivalent to the 4 Pseudo-Class of the link:

1. a: link {color: blue;}: Show different effects so readers know this is a link.
2. a: visited {color: green;}: The link has been clicked on.
3. a: hover {color: red;}: Hover over the link.
4. a: active {color: navy;}: The link is being clicked on.

Note :

1. a: hover must appear after a: link and a: visited in CSS to create the effect.
2. Similarly, a: active must appear after a: hover.
3. The names used for the Pseudo Class are not case sensitive.
4. The Pseudo Class is different from other Classes in CSS, but they can be combined.

For example :

Website homepage
Network administrator

The code above defines the link at:

1. Normally it will be green (blue) and underlined is the default value.
2. The link has been clicked by the user, it will be green.
3. The user hovers over (not yet clicked) it will be pink.
4. Users only click and hold the mouse will be red (rarely happens).

Pseudo-class and CSS Class

Pseudo-classes can be combined with CSS classes.

For example, when you hover over the link, it changes color:

 a.highlight:hover { 
  color: #ff0000; 
 } 

Website homepage
Network Administration (Use Pseudo-class to combine CSS Class)

Technology Village - Administration
network (Do not use Pseudo-class to combine CSS Class)

Mouse over

An example of using pseudo-class : hover above

changes the background color of the element.

 div:hover { 
  background-color: purple; 
 } 

Hovering over the div element below will change its background color:

Create tooltip: simple hover

Create a tooltip : simple hover type of mouse movement on the element

to display an element

 p { 
  display: none; 
  background-color: yellow; 
  padding: 20px; 
 } 
 
 div:hover p { 
  display: block; 
 }