Contextual Selectors

A contextual selector, as you might guess from the apt description, is a selector that works only within a certain context. The context that’s referred to is the parent element of another element. Normally, when one element is contained within another — as when a heading contains some kind of emphasis on a particular word (like bolding it) — the contained element inherits the properties of its parent element.

Okay, that’s a long-winded way of saying that if you set your H1 elements to be blue and you add <B></B> tags around one word in one H1 element, that bolded word will also be blue. But what if you want all B elements that appear within an H1 element to turn green? You can do that, no problem. And, because you’re using contextual selection, no B elements that appear outside an H1 element will be affected. Here’s how the code for such a style declaration actually looks:

<HEAD>                                                        
						<STYLE>                                                       
						H1                                                            
						{color:blue}                                                  
						H1 B                                                          
						{color:green}                                                 
						</STYLE>                                                      
						</HEAD>

Get Building a Web Site For Dummies®, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial