Things You'll Need:
- A basic understanding of HTML
- A basic understanding of CSS
-
Step 1
A simple HTML document treeA web page is organized in a hierarchy. The document hierarchy begins with html and descends through a tree structure that could include many elements within the body. Here's a simple tree diagram.
-
Step 2
In the document tree, elements descend from the parent element that encloses them. In the example, there are lists that are the descendant elements of either the content div or the sidebar div. Furthermore, the lists are the ancestors of an A element (a hypertext link).
-
Step 3
The CSS syntax for a descendant selector is to list the selectors separated by a space, (but not a comma). For example:
#content ul a {rule here}
This selector targets an A element that is contained within a UL element that is contained within the CONTENT div. Other A elements on the page, perhaps one in a paragraph or in the SIDEBAR div, would not be affected by this selector. -
Step 4
To style a list or list item in the sidebar, use a descendant selector like this:
#sidebar ul {rule here}
or
#sidebar li {rule here}
To style a hyperlink in the sidebar that is not nested in a list, use selectors like this:
#sidebar a:link {rule here}
#sidebar a:visited {rule here} -
Step 5
To make P elements appear differently in the content area and the sidebar area, use descendant selectors like this:
#content p {rule here}
#sidebar p {rule here} -
Step 6
Descendant selectors can also be based with classes. For example, if every post on your blog was assigned to the class "blogpost" you could write a descendant selector for an em (emphasized) element in an h3 element that was part of a div in the class blogpost like this:
h3.blogpost em {rule here} -
Step 7
Descendant selectors can become quite lengthy when you are targeting a very specific element on a complex page. For example:
#blogpost blockquote p em {rule here}
It is the ability to get completely focused on one and only one element on a page using descendant selectors that give you the power to style your page in any way you desire.
