Forum Moderators: not2easy
3.10. target pseudo selector
The target [w3.org] pseudo selector selects element -if any- that is reference by the fragment identifier (the element that has an id that matches with the part after the # in the URL)
Syntax: E:target
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
#menu {
list-style:none;
}
#menu li:hover {
background-color:yellow;
}
#menu li:target {
background-color:red;
}
#menu li:target:hover {
background-color: orange;
}
</style>
</head>
<body>
<p>Click on the links</p>
<ul id="menu">
<li id="a1"><a href="#a1">one</a></li>
<li id="a2"><a href="#a2">two</a></li>
<li id="a3"><a href="#a3">three</a></li>
</ul>
</body>
</html>
Note the order and specificity allowing the :target and :hover to interact.
Example 2:
A gallery using just html and CSS and allows you to choose which of the thumbnails is shown, not by hovering, by by clicking.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<style type="text/css">
* {
padding:0;
margin:0;
}
#gallery {
list-style:none;
width: 400px;
text-align: center;
}
#gallery a>img {
height: 100px;
width: 100px;
border: none;
}
#gallery span>img {
height: 400px;
width: 400px;
border: none;
}
#gallery span {
display:none;
}
#gallery li {
display:inline;
}
#gallery li:target span {
position: absolute;
display: block;
top: 150px;
left: 80px;
}
</style>
<!--[if lt IE 9]>
<script type="text/javascript">
$(document).ready(function(){
$("#gallery a").click(function(){
$("#gallery li").removeClass('istarget');
$(this).parent().addClass('istarget');
})
});
</script>
<style type="text/css" media="screen">
/* rule that mimics li:target once the class
has been added via the function above */
#gallery li.istarget span {
position: absolute;
display: block;
top: 150px;
left: 80px;
}
</style>
<![endif]-->
</head>
<body>
<p>Click on the images:</p>
<ul id="gallery">
<li id="p1">
<a href="#p1"><img src="1s.jpg" alt="mandatory1" />
<span><img src="1.jpg" alt="mandatory1" /></span></a>
</li>
<li id="p2">
<a href="#p2"><img src="2s.jpg" alt="mandatory2" />
<span><img src="2.jpg" alt="mandatory2" /></span></a>
</li>
<li id="p3">
<a href="#p3"><img src="3s.jpg" alt="mandatory3" />
<span><img src="3.jpg" alt="mandatory3" /></span></a>
</li>
</ul>
</body>
</html>
Support:
IE8.js adds support for :target in IE7 and IE6.
jQuery is incorporated in example 2 as it covers all IE versions to date
No known fix for the use of the back button in Opera and it forgetting to update the page.
Practical use:
This one could be used very extensively in interactions with user as it allows interaction between a page and the CSS based on clicks, not just based on hovering alone. So the potential to see this in menus, image galleries etc. are there in force.
$(document).ready(function(){
$('a[href^=#]').click(function() {
var id = $(this).attr('href');
$('*').removeClass('istarget');
$(id).addClass('istarget');
})
});see Appendix B [webmasterworld.com] for more information on this particular function, and if you can make it even better or suggest a more optimal way do post here!
[edited by: SuzyUK at 3:43 pm (utc) on July 5, 2009]
