The :target pseudo-class is used to specify a target element. Now We create Web page named targetpc.html which shows the use of the :target pseudo-class.
<!doctype html>
<head>
<style type="text/css">
div, ul, li, a, p{
padding:0;margin:0;
}
#content{
width:500px;
margin:auto;
font-size:20;
}
ul, div>div{
margin-bottom:1em;
}
li{
list-style:none;
}
div > div{
padding:1em;
border:1px solid green;
}
div > div p:first-line{
font-variant:smaal-caps;
font-size:1.2em;
}
div > div:target{
border:2px solid blue;
background:yellow;
}
</style>
</head>
<body>
<DIV id="content">
<ul>
<li><a href="#b1">block 1</a></li>
<li><a href="#b2">block 2</a></li>
<!doctype html>
<head>
<style type="text/css">
div, ul, li, a, p{
padding:0;margin:0;
}
#content{
width:500px;
margin:auto;
font-size:20;
}
ul, div>div{
margin-bottom:1em;
}
li{
list-style:none;
}
div > div{
padding:1em;
border:1px solid green;
}
div > div p:first-line{
font-variant:smaal-caps;
font-size:1.2em;
}
div > div:target{
border:2px solid blue;
background:yellow;
}
</style>
</head>
<body>
<DIV id="content">
<ul>
<li><a href="#b1">block 1</a></li>
<li><a href="#b2">block 2</a></li>
<li><a href="#b3">block 3</a></li>
<li><a href="#b4">block 4</a></li>
</ul>
<DIV id="b1">
<p> This is the 1st paragraph This is the 1st paragraph This is the 1st paragraph</p>
</DIV>
<DIV id="b2">
<p>This is the 2nd paragraph.</p>
</DIV>
</ul>
<DIV id="b1">
<p> This is the 1st paragraph This is the 1st paragraph This is the 1st paragraph</p>
</DIV>
<DIV id="b2">
<p>This is the 2nd paragraph.</p>
</DIV>
<DIV id="b3">
<p> This is the 3rd paragraph This is the 3rd paragraph This is the 3rd paragraph</p>
</DIV>
<DIV id="b4">
<p>This is the 4th paragraph. This is the 4th paragraph. This is the 4th paragraph. This is the 4th paragraph.</p>
</DIV>
</DIV>
</body>
</html>
The OutPut of the above Web Page is:
<p> This is the 3rd paragraph This is the 3rd paragraph This is the 3rd paragraph</p>
</DIV>
<DIV id="b4">
<p>This is the 4th paragraph. This is the 4th paragraph. This is the 4th paragraph. This is the 4th paragraph.</p>
</DIV>
</DIV>
</body>
</html>
The OutPut of the above Web Page is:
No comments:
Post a Comment