Contextual Selectors

These tutorials are about CSS, or Cascading Style Sheets.

Note that not all examples will work in all browsers.

Contextual Selectors

We have talked about two types of style sheet selectors, these are element selectors, which select by element name, and class selectors, which select by class name.

/* a sample element selector */
h1, h2, h3 { color: #000066; }

/* a sample class selector */
.important { 
  font-weight: bold;
  text-decoration: underline;
  }

There are actually many types of selectors, or ways of organizing selectors. But rather than confusing the issue by taking them on all at once, it is easier to get started with the basics and then come back for the advanced topics after you have had some time to experiment.

In this section, we are going to talk about contextual selectors, which allow you to do even more with style sheets.

Simple Contextual Selectors

You can use contextual selectors to indicate the context of a selector. The context of a selector is determined by what its parent element is. In other words, what the element is nested within or what precedes it in the document.

For instance, if you wanted to have some form of special formatting for unordered lists inside ordered lists, you could write:

ol ul { ... }

This can be read as "for any unordered list that is nested within an ordered list." Thus they style rule will only apply to unordered lists inside ordered lists.

The matching of the tag sequence does not have to be exact. As long as one tag is nested inside the other at any level of nesting then the style rule will be applied. In other words, if an unordered list were inside a table that was itself inside an ordered list, the above rule would still apply.

The Child Selector

If you want to specify that only those elements that are direct descendants (which is to say, first generation children) of a prior tag are to be selected, then you use the child selector. The child selector is indicated with the greater than sign, or open bracket (>). The child selector only selects an element if it is the immediate child of another element. For instance:

ul > ol { ... }

This would only select ordered lists that were nested inside unordered list items. If you had an ordered list inside an ordered list which itself was inside an unordered list, then the inner ordered list would not be affected by this rule (it is the child of another ordered list), although the outer ordered list would (it is the child of an unordered list).

<style>
/* style rule 1 - simple context */
ul ol { some rules ... }
/* style rule 2 - child selector */
ul > ol { some rules ... }
</style>

[ . . . ]

<ul>
  <li>This is an unordered list
  <ol>
    <li>Both style rule 1 and style rule 2
    would apply here, since this element
    is both a child of an unordered
    list and has the context of being 
    inside an unordered list.</li>
    <li>
    <ol>
      <li>Only style rule 1 would apply
      here because this has a context
      of being within an unordered, but
      is not a direct child of that list.</li>
    </ol>
    </li>
  </ol>
  </li>
</ul>

The Sibling Selector

You can also select items based on whether they are siblings of other elements. By putting a plus sign ( + ) between selectors, you can indicate that you only want to select instances of the second selector that are immediately preceeded by the first.

For instance, I use the following rules to reduce the amount of space between a heading level four element (<h4>) and a following paragraph. The first set the bottom margin of the heading to zero. The second rule sets the top margin of a paragraph, if it is immediately after a level four heading, to zero.

h4 { margin-bottom: 0px; }
h4 + p { margin-top: 0px; }

These pages can be found at: [http://academ.hvcc.edu/~kantopet/]
Copyright 2003 -- Peter L. Kantor[kantopet@hvcc.edu]
Last Updated August 2003