Also known as styling via Descendent Selectors.
Styles can be targeted at html tags in a particular context.
This method of applying styles is preferred by many web professionals.
It means tags can be styled without using classes, ids or inline styles and
results in cleaner html.
For example, using the style declaration, span i {color:yellow;}, only Italic text that is inside a Span tag gets rendered yellow.
The text is inside a span tag but not italic tag so it is not yellow. This text is both inside a span tag and an Italic tag.
For example compare these lines of html and their associated css.
.yellowitalic {color:yellow;}
This text is both <span><i class='yellowitalic'> inside a span tag and an Italic tag.</i></span>
and
span i {color:yellow;}
This text is both <span><i> inside a span tag and an Italic tag.</i></span>
In the second case the html is cleaner because we do not need to assign a
css style class.
It is a further step in the process of separating content from presentation.
Note: span i {color:yellow;} is not the same as span,i {color:yellow;}
With span, i {color:yellow;} all text that is either in a Span OR Italic tag will be
yellow.
In other words span, i {color:yellow;} is the same as writing
span {color:yellow;}
i {color:yellow;}
We can also apply a class to a specific html tag.
We have applied the .blueone class to the italic tag
Here is some italic text to look at.
Here is some italic and blue text to look at.
As you can see the blue color is only applied to the italic text with the class='blueone'
<head>
<style type="text/css">
i.blueone { color: blue; }
</style>
</head>
<body>
Here is <i>some italic text</i> to look at.
Here is some <i class='blueone'> bold and blue text </i> to look
at.
</body>