If you have come upon this page accidentally, view the original tutorial for CSS siblings and child & descended elements.

This page will not view as indended in IE version 6 and below. Please view the comments in my embedded CSS style to learn more about the CSS used to format this page.

Experimenting with child and descended elements

The above heading has two em tags and one strong tag. Because the second em tag is nested in the strong tag, it is not a child of the h1 tag, so the color is not red. The first em tag is a direct child, so the color style of red will be applied.

Experimenting with child and descended elements

Any em tags in the above heading will display as red, because they are nested descendants of the h2 tag.

Adjacent Siblings

This paragraph will display as blue, since it immediately follows the h3 element.

This paragraph will be styled normally as black.

Lists

  1. List Item
  2. List Item
  3. List Item
  4. List Item
  5. List Item
  6. List Item
  7. List Item

The above list will display all but the first three list items as purple.

The above list will display all but the first four list items as bold.

One more try

This paragraph, since it is an adjacent sibling of the h3 tag, will follow the same rule as above and be blue.

Copyright © 2006 by debbie T - splash of style