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>
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access