U of S | DCS | Courses | CAI | CSS | Selector Nesting

Context Sensitive Definitions

CSS can set different styles depending upon the context in which an HTML tag is used. For example, you may want emphasized text in a <h2> heading to be displayed in green letters, while <em> text in the normal document is unaltered.

Do this by separating the tags with spaces instead of commas. This means that the style is only used when you have the first tag, and nested inside it the second tag, and so on.

For example, to say that emphasized characters inside a <h2> heading should be in green letters, use the following:

h2 em {color:green}
Here's an emphasized heading
... and here's some normal emphasized text. Notice only the emphasized text in the heading is green.

Please send comments about this course to Kevin.Lowey@Usask.CA

Context Sensitive Definitions

Here's an emphasized heading