:target pseudo-class : Pseudo Class « Style Basics « HTML / CSS
- HTML / CSS
- Style Basics
- Pseudo Class
:target pseudo-class
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Albert Einstein </title>
<style type='text/css' media='all'>
div#quoteimage:target {
background-color: black;
border: 1px solid white;
}
h1#top:target {
background-color: black;
border: 1px solid white;
color: white;
}
h1 a {
color: inherit;
text-decoration: none;
}
div#quoteimage {
margin: 10px;
text-align: center;
}
img#albert {
width: 305px;
height: 240px;
border: 5px solid black;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
<div>
<h1>Famous Quotes</h1>
<h1 id='top'><a href='#quoteimage'>Albert Einstein</a></h1>
</div>
<div></div>
<ul>
<li><a href='http://www.google.com'>Google</a></li>
<li><a href='http://p2p.wrox.com'>Wrox P2P</a></li>
<li><a href='http://www.mozilla.org'>Mozilla</a></li>
<li><a href='http://pear.php.net'>PEAR</a></li>
</ul>
<div>
<p>
This is a test. This is a test.
</p>
</div>
<div></div>
<div id='quoteimage'>
<a href='#top'><img src='http://www.java2s.com/style/logo.png' id='albert' /></a>
</div>
</body>
</html>
Related examples in the same category