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.

Contextual Selectors in css
Contextual Selectors code in css
Contextual Selectors css code
Contextual Selectors output

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>&copy; Global Bank</h2>
                </footer>
            </td>
        </tr>
    </table>
</body>
</html>

body{background-color:lightgrey;}
#contextual_selector #css_contextual_selector #css_contextual_selector_example #contextual_selectors_css_examples_

(New page will open, for Comment)

Not yet commented...