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


  • 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>
a:link {background:yellow}
a:visited {background:pink}
a:hover {background:lightgreen}
a:active {background:purple}
li:empty {background:brown}

<a href="">Facebook</a>
<a href="">Google</a>
<a href="">Yahoo</a>
<a href="">Twitter</a>

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

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


Copy above code & try it into your natepad

Browser View Screen Below:

Pseudo Classes

Copyright © 2020. All rights reserved.