Pseudo-classes Tutorials and Examples

Pseudo-classes Tutorials
Pseudo-classes Tutorials
Pseudo-classes Tutorials

Pseudo-classes are used to add effects to some selectors. A simple syntax of pseudo-classes is as follows −

selector:pseudo-class {
  property:value;
}

List Of most commonly used CSS pseudo-classes 

S.N Pseudo-class Description
1. :link We use this class for make styling in link
2. :visited We use this class for making visited link styling
3. :hover We use this class to add style to an element when you mouse over it.
4. :active We use this class to add style to an active element.
5. :focus We use this class to add style to an element while the element has focus.
6. :first-child We use this class to add style to an element that is the first child of some other element.
7. :lang We Use this class to specify a language to use in a specified element.

Examples

<style type="text/css">
  a:link 
  {
    color:#000000;
  }
  
   a:hover
  {
    color:#FF0000;
  }
  
   a:visited  
  {
    color:#0033FF;
  }
  
   a:active 
   {
    color:#006600;
   }
  
  
</style>

<h2><a href="http://schauhan.in/pseudo-classes-tutorials-and-examples/">Home</a></h2>
  <h3>Here We can see the Pseudo-classes | .active | .visited | .hover | .link |</h3>

The :first-child pseudo-class

By Using :first-child pseudo-class we can style any specified element which is first child of that element Example Given Below.

<style type="text/css">
  
  .bs p:first-child
  {
	  color:#FF0000;
	  font-weight:600;
  }
  
   .bs
{
	padding:10px;
	-webkit-box-shadow: 0px 0px 9px 0px rgba(214,214,214,1);
    -moz-box-shadow: 0px 0px 9px 0px rgba(214,214,214,1);
    box-shadow: 0px 0px 9px 0px rgba(214,214,214,1);
	border-radius:5px;
}
</style>
  
<div class="bs">
   <p>This is our first paragraph we will style this element of div.</p>
   <p>This is our Second paragraph.</p>
  </div>

:first-line pseudo-element

The :first-line Pseudo Class use to create or add special style in first line. Example Given Below.

<style type="text/css">
  
  .bs p:first-line
  {
	  color:#FF0000;
	  font-weight:600;
  }
  
   .bs
{
	padding:10px;
	-webkit-box-shadow: 0px 0px 9px 0px rgba(214,214,214,1);
    -moz-box-shadow: 0px 0px 9px 0px rgba(214,214,214,1);
    box-shadow: 0px 0px 9px 0px rgba(214,214,214,1);
	border-radius:5px;
}
</style>

<div class="bs">
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>

:first-letter pseudo-element

We use this :first-letter element to add style to the first letter of the text in a selector.

<style type="text/css">
  
  .bs p:first-letter
  {
	  color:#FF0000;
	  font-weight:600;
	  font-size:30px;
  }
  
   .bs
{
	padding:10px;
	-webkit-box-shadow: 0px 0px 9px 0px rgba(214,214,214,1);
    -moz-box-shadow: 0px 0px 9px 0px rgba(214,214,214,1);
    box-shadow: 0px 0px 9px 0px rgba(214,214,214,1);
	border-radius:5px;
}
</style>

<div class="bs">
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>

Leave a Reply

Your email address will not be published. Required fields are marked *