CodeAve.com CodeAve.com - CSS - Text Display
ASP
JavaScript
CSS
·Basics
·Page Display
·Text Display
·Script Writers
·Contents
·What's New?
HTML
Maps
Links
Mail List
Search
Sitemap

 

Contextual Selectors
Contextual selectors define styles that are only applied when certain tags are nested within other tags.  This allows you to use a tag an not have it adopt the CSS attribute each time it is used.  In this first example we have the<p> tag defined by a contextual selector to only display a tan background behind the text when there is an <i> tag nested within the <p> tag.  The second example we nested a strong tag within the <p>and <i> tags to display a yellow background.  Only the combination of either of those tags will yield a background color.
•View the Output
•Text View
•Print View
•Mail this Link
•Download the Code

<html>
<head>
<title>CodeAve.com/CSS - Contextual Selectors</title>
<style type="text/css">
<!--
/* All contextual selectors are seprated by a 
space not by a comma as in CSS grouping */

/* two selector example */
p i {background: tan;}

/* three selector example */
p i strong {background: yellow;}
-->
</style>
</head>
<body bgcolor="#FFFFFF">

<p>
Regular document text not affected by style sheet. 
<br>
<i>
Document text that affected by style sheet, 
because of the &lt;i&gt; tags inside the &lt;p&gt; tags
</i>
</p>

<p>More document text not affected by style sheet, although
contained between &lt;p&gt; tags</p>
<i>More document text not affected by style sheet, although
contained between &lt;i&gt; tags</i>

<p><i><strong>
Document text that affected by style sheet, 
because of the &lt;p&gt;&lt;i&gt;&lt;strong&gt; tags surrounding the text
</strong></i></p>

</body>
</html>

 

 

 


 ASP: What's New? | Articles | Script Writers | Database Display | Read/Write
Server Variables | Response Objects | Random Events | Miscellaneous
HTML: Forms | Hyperlinks | Headers | Tables | Hyperlinks | Headers | Text Display
JavaScript: Document Info | Forms | Images | Navigation | Script Writers
CSS: Basics | Page Display | Text Display | Script Writers | Miscellaneous
Links | Search Engine db |  Privacy Statement |  Advertising Rates |  Email

CodeAve.com is hosted by MyHosting.com
Donate Food Online with a Mouse Click at TheHungerSite.com
Donate Land Online with a Mouse Click at TheRainForestSite.com
© 1999 - 2010 CodeAve.com
All Rights Reserved