Contextual selector

/* 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).   
  [ . . . ]  
   
This is an unordered list   
     
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.
     
     
       
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.
     
     
   
   
 

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 (

) 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; }