HTML Pseudo Classes


Pseudo Classes

Pseudo-classes are classes with some kind of 'intelligence'

When the mouse moves over any h1

The text temporarily changes to any color

Properties:

  • link
  • visited
  • hover
  • active
  • empty

Link means a link

a:link {color: red}


Visited means a link that has been visited

a:visited {color: red}


Active means a link that is currently being followed

a:active {color: red}


Empty means an empty element

p:empty {color: red}


<!doctype html>
<html>
<head>
<style>
a:link {background:yellow}
a:visited {background:pink}
a:hover {background:lightgreen}
a:active {background:purple}
li:empty {background:brown}
</style>
</head>
<body>

<a href="http://www.facebook.com">Facebook</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.twitter.com">Twitter</a>

<h1>My first heading</h1>
<p>My first paragraph</p>
<h1>My second heading</h1>
<p>My second paragraph</p>

<ol>
<li>Heading one</li>
<li>Heading Two</li>
<li>Heading Three</li>
<li>Heading Four</li>
</ol>

</body>
</html>

Copy above code & try it into your natepad


Browser View Screen Below:

Pseudo Classes



Copyright © 2020. All rights reserved.