Title

When you use two selectors separated by a space on a rule, you scope the rule to the elements that correspond to the selector on the right that are INSIDE the elements that correspond to the selector on the left. Let's say we have the following HTML:

  1. Secton 1
  2. Secton 2

Section 1

  1. item 1
  2. item 2
    1. sub item 1
    2. sub item 2
    3. sub item 3
    4. sub item 4
  3. item 3

If we applied the following CSS rule then the images INSIDE the paragraph would be set to a width of 100px, but that rule would not apply to the images outside the paragraph. Below is a diagram of the given HTML with the two imgs that will styled by the above rule are indicated by the red arrows.

Section 2

  1. item 1
    1. sub item 1
    2. sub item 2
  2. item 2

As your Web pages get more complex, contextual selectors become more important, because it won't scale to apply classes and IDs to each individual item. Contextual selection becomes especially useful when you structure your HTML with section tags like header, section, article and footer. Pay attention to the styles of the paragraphs and lists in the following example: