HTML and CSS Reference
In-Depth Information
Figure 14.21
A table with stylized cells.
When you create a contextual selector, the last element in the selector list is the one that
is affected by the style when it is used in context of the elements preceding it. For example,
if you have a selector list:
table td em { color: blue ;}
, then the
em
element, the last in the list,
will be affected by the style only when it is inside a table cell at which point the table cell
will be contain blue italic text. This doesn't define the style for the <
td
> tag, only the <
em
>
tag if it is used in the context of
<td>
; as in
<td><em>.
See Example 14.21
.
EXAMPLE
14.21
<html>
<head><title>Contextual Selector</title>
<style type="text/css">
1
table td em
{ color: blue; /*
Table cells take this style
*/
font-size: 18pt;
font-family: verdana; }
</style>
</head>
<body bgcolor=silver>
<div align="center">
2
<h1><em>
The Three Bears</em></h1>
<table cellspacing="20" cellpadding="20%" border="3">
<tr>
3
<td><em>
Mama Bear</em></td>
</tr>
<tr>
4
<td>
Papa Bear</td>
</tr>
<tr>
Continues
