We have learned that structural pseudo-classes allow the selection of elements on the basis of same extra information for instance the position of their child elements. Some examples of structural pseudo-classes are :first-child and :nth-last-child(N), where :first-child selects first child element of its parent and :nth-last-child(N) selects the specified child element by starting the counting from the last child.
Now create a Web page named structuralpc.html which shows the use of the structural pseudo-classes.
<!doctype html>
<head>
<style type="text/css">
:root{background:rgb(230, 238, 213);}
p:first-of-type{border:2px solid black;background:lime;}
p:last-of-type{border:2px solid black;background:orange;}
li:first-child{border:2px solid black;background:pink;}
p:nth-last-of-type(2){border:2px solid black:background:red;}
li:nth-last-child(2){border:2px solid black;background:aqua;}
</style>
</head>
<body>
<p>This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph</p>
<ul>
<li><a href="#block">link1</a></li>
<li><a href="#block">link2</a></li>
<li><a href="#block">link3</a></li>
<li><a href="#block">link4</a></li>
<li><a href="#block">link5</a></li>
</ul>
<p>
<h1>This is the second paragraph This is the second paragraph This is the second paragraph This is the second paragraph This is the second paragraph This is the second paragraph This is the second paragraph </h1></p>
<p>This is the third paragraph
<p>child 1</p>
<p>child 2</p>
<p>child 3</p>
<p>child 4</p>
<p>child 5</p></p>
</body>
</html>
The body element has three p element and one UL element the UL element contains five child LI elements.
The output of the above Web page:
Now create a Web page named structuralpc.html which shows the use of the structural pseudo-classes.
<!doctype html>
<head>
<style type="text/css">
:root{background:rgb(230, 238, 213);}
p:first-of-type{border:2px solid black;background:lime;}
p:last-of-type{border:2px solid black;background:orange;}
li:first-child{border:2px solid black;background:pink;}
p:nth-last-of-type(2){border:2px solid black:background:red;}
li:nth-last-child(2){border:2px solid black;background:aqua;}
</style>
</head>
<body>
<p>This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph This is the first paragraph</p>
<ul>
<li><a href="#block">link1</a></li>
<li><a href="#block">link2</a></li>
<li><a href="#block">link3</a></li>
<li><a href="#block">link4</a></li>
<li><a href="#block">link5</a></li>
</ul>
<p>
<h1>This is the second paragraph This is the second paragraph This is the second paragraph This is the second paragraph This is the second paragraph This is the second paragraph This is the second paragraph </h1></p>
<p>This is the third paragraph
<p>child 1</p>
<p>child 2</p>
<p>child 3</p>
<p>child 4</p>
<p>child 5</p></p>
</body>
</html>
The body element has three p element and one UL element the UL element contains five child LI elements.
The output of the above Web page:
No comments:
Post a Comment