programplug Logo




CSS - Pseudo Classes

CSS pseudo classes are used to specify the special state of an element.
For example:
1 To insert the content after or before the content of an HTML element.
2 To be used in styling the first line or letter of an element.
Syntax:

selector::pseudo-element
{
property:value;
}
      

Some of the most commonly Pseudo classes are listed below:

The :first-child Pseudo-class
The Pseudo-class of the first child work to match the element to the first child element to some other element.
To make the First-child work in you must declare the <!DOCTYPE> at the top of code.
Example -
<!DOCTYPE html> 
<html> 
<head>  
<style>  
<meta charset="UTF-10">  
<title>  first-child Pseudo-class</title>  
<style type="text/css">  
ol{
padding: 1;
list-style: none;          
}
ol li{
padding: 20px 0;
border-top: 1px solid #000000;
}
li:first-child {
border-top: none;
}
</style>  
</head>   
<body>  
<h1>  Simple chat</h1>  
<ol>  
<li>  Cut the fruits</li>  
<li>  Pour it on the bowl</li>  
<li>  Serve with smile</li>  
</ol>  

</body>  
</html>                  

		 
Output:

Simple chat

  1. Cut the fruits
  2. Pour it on the bowl
  3. Serve with smile

The :last-child Pseudo-class
The :last-child Pseudo-class used to matches an element to the last child element of some other element.The selector selects the last item from an unordered list and remove it from the right border.
Example:

<!DOCTYPE html> 
<html> 
<head>  
<style>  
<meta charset="UTF-8">  
<title> last-child Pseudo-class</title>  
<style type="text/css">  
ol{
padding: 1;
list-style: none;          
}
ol li{
padding: 40px 0;
border-top: 1px solid  #ff6347;
}
li:first-child {
border-top: none;
}
</style>  
</head>   
<body>  
<h1>Travel </h1>
<ol>
<li>Home </li>
<li>Our Service </li>
<li> Contact us</li>
<li> Register</li>
</ol>
</body> 
</html> 
Output:

Travel

  • Home
  • Our Service
  • Contact us
  • Register

Pseudo-classes and CSS Classes:
The Pseudo - classes are the class which were used to merged with CSS Classes.

Example:
<!DOCTYPE html> 
<html> 
<head>  
<meta charset="UTF-10">  
<title>  Pseudo-classes with Selectors</title>  
<style type="text/css">  
a.green:link
{
color:  #ff0000;
}
</style>  
</head>   
<body>  
<p>  
<a href="#">Check me </a>  
<br>  
<a href="#" class="red"> Check me</a >  
</p>  
</body>  
</html>  
 
Output:

Check me
Check me

Anchor Pseudo-classes:
By using Anchor Pseudo-classes links can be seen or displayed in different ways and the most common technique is to remove the underlines from the visted links.

Example:
a:link {
color: red;
}
a:visited 
{
text-decoration: none;
}
   

You can use dynamic Anchor Pseudo-classes for user interaction with the document like hover or active etc.

a:hover {
color: green;
}
a:active {
color: red;
}
a:focus 
{
color: blue;
}
	

The most commonly pseudo- classes is as to be used as a user actions:


VALUES DESCRIPTION
:hover It applies when an user places its cursor over the element, but does not select it the cursor.
:focus It work when an element has keyboard focus.
:active It specify when the element is activated or clicked in a HTML element.





Our Services

Developing Cheapest Websites
Offer Digital Marketing
Provide College Projects
Attractive Website Developing
Summer Training,Industrial Training
SCO,SMO

Contact Us

Dehradun Uttarakhand India
www.programplug.com
info@programplug.com
08534019974
Designed By : Mridul Gupta

Other Link

About Us

Contact Us

Disclaimer

Privacy Policy