CSS Contextual Selectors
CSS - Contextual Selectors
Contextual Selectors
We use contextual selectors when we want selectors to match elements that appear in a context.
Context is referred to as a parent/child relationship between HTML elements.
While writing the style rules using contextual selectors, the parent and child element should be separated using space.
Demo
CODE/PROGRAM/EXAMPLE
<!doctype html>
<head>
<title>Home Page</title>
<meta charset="UTF-8">
</head>
<body>
<table border="1" align="center">
<tr>
<td width="800px" height="100px">
<h2>Global Bank</h2>
</td>
</tr>
</table>
<table border="1" align="center" cellpadding="2">
<tr>
<td width="700px">
<section>
<h3>Welcome to Global Bank Home Page !</h3><br/>
<p><em>Global Bank</em> is a international bank which has branches in various
cities of various country.</p>
</section>
<p>
This application automates the banking process.Using this application the admin can
easily create new accounts and the customers can login to view their account details.
</p><br />
<table align="center" border="4 solid" bordercolor="#8598CC">
<tr>
<td>
<h4 align="center">Login</h4>
<form name="loginForm" action="Details.html">
<table cellpadding="5">
<tr>
<td align="right">User Name</td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">Password</td>
<td><input type="password" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Login">
</td>
</tr>
</table>
</form>
</td>
</tr><br/>
</table><br/>
<p>
Submit online application for new account here <a href="signUp.html">Create Account</a>
</p>
</td>
</tr>
</table>
<table border="1" align="center">
<tr>
<td width="800px" height="30px">
<footer>
<h2>© Global Bank</h2>
</footer>
</td>
</tr>
</table>
</body>
</html>
body{background-color:lightgrey;}