CSS Tutorials

adplus-dvertising
Pesudo Classes In CSS
Previous Home Next

A pseudo-class is similar to a class in HTML, but it’s not specified explicitly in the markup.Some pseudo-classes are dynamic — they’re applied as a result of user interaction with the document. A pseudo-class starts with a colon (:). No whitespace may appear between a type selector or universal selector and the colon, nor can whitespace appear after the colon.A pseudo-class is used to define a special state of an element.

Pseudo-classes allow you to format items that are not in the document tree. They include:

  • :link: Basically it is the selector for normal links
  • a.first:link {
    color: #FF0000;
    }
    
  • :visited: Basically it is the selector for visited links
  • a.second:visited {
    color: blue;
    }
    
  • :hover: Basically it is the selector for hover state.In which selects links on mouse over.
  • a.third:hover {
    color: green;
    }
    
  • :active:Active is the selector for active links.It gets applied when an element is in an active state.
  • a.fourth:active {
    color: #FF0000;
    }
    
  • :focus: It is only applied to interactive elements like links, buttons and form elements. The styles are applied as soon as the element receives focus
  • a.focus{
    color:#FF0000;
    }
    
Simple Example
<html>
<head>
<style>
a.first:link {
color: #FF0000;
}
a.second:visited {
color: blue;
}
a.third:hover {
color: green;
}
a.fourth:active {
color: #FF0000;
}
</style>
</head>
<body>
<p><a class="first" href="introduction_of_css">CSS Introduction</a></p>
<p><a class="second" href="lists_in_css"> Lists in CSS</a></p>
<p><a class="third" href="fonts_in_css"> Fonts in CSS</a></p>
<p><a class="fourth" href="dimensions_in_css"> Dimensions in CSS</a></p>
</body>
</html>
Previous Home Next