If you write a rule where you simply use the tag name as the selector, then every tag of that type is targeted. For example, by writing:
<p> {color:red;}
every paragraph would have red text.
But if what if you only want one particular paragraph to be red? To target tags more selectively, you use the contextual selectors. Here's an example
div p {color:red;}
Now only paragraphs within div tags would be red.
For example:
<h1>Contextual selectors are <em>very</em> selective.<h1>
<p>This example shows how to target a <em>specific</em> tag using the document hierarchy.</p>
<p>Tags only need to be descendants <span>in the <em>order stated</em> in the selector</span>; other tags can be in between and the selector still works.</p>
This shows how this code looks with just the browser's default styling.
This example shows how to target a specific tag using the document hierarchy.
Tags only need to be descendants in the order stated in the selector; other tags can be in between and the selector still works.
Markup's Hierarchy:
