Selecting Elements by Context

In CSS you can pinpoint elements depending on their ancestors, their parent, or their siblings (see page 31).

An ancestor is any element that contains the desired element (the descendant), regardless of the number of generations that separate them.

Figure 9.12. I've snipped the text to make the relationships between elements easier to see. Each indentation represents a generation. Note that there are two second generation p elements, directly within the gaudi div, and one third generation p element, within the works divs (within the gaudi div).

To select elements to format based on their ancestor:

1.	Type ancestor, where ancestor is the name of the element that contains the element you wish to format.
2.	Type a space (Figure 9.13). Figure 9.13. The space between div#gaudi and p means that this selector will find any p element that is a descendant of the gaudi div, regardless of its generation.
3.	If necessary, repeat steps 12 for each successive generation of ancestors.
4.	Type descendant, where descendant is the name of the element you wish to format.

Figure 9.14. All of the p elements that are contained within the gaudi div are red, even if they're also within other elements within that gaudi div.

Tips

• A selector based on an element's ancestor is called a descendant selector.

• Descendant selectors are well supported by current browsers.

• Don't be thrown off by the div#gaudi portion of the example (even though it's ugly). Remember that it simply means "the div whose id is equal to gaudi" (see page 140). So div#gaudi p means "any p element that is contained in the div whose id is equal to gaudi".

A parent is the element that directly contains the desired element (the child) with no intermediate containing elements.

To select elements to format based on their parent:

1.	Type parent, where parent is the name of the element that directly contains the element you wish to format.
2.	Type > (the greater than sign) (Figure 9.15). Figure 9.15. This selector will only choose those p elements that are children of the gaudi div. They may not be contained within any other element in order to qualify.
3.	If necessary, repeat steps 12 for each successive generation of parents.
4.	Type child, where child is the name of the element you wish to format.

Figure 9.16. Only the first two p elements are children of the gaudi div. The two other p elements are children of the works div. For the (X)HTML code used in this example, see Figure 9.12 on page 141.

Tips

• A selector based on an element's parent is called a child selector.

• Internet Explorer 5.5 and 6 for Windows did not support the child selector. Internet Explorer 7 does (Figure 9.17).

  Figure 9.17. Although Internet Explorer 5.5 and 6 did not recognize the child selector, Internet Explorer 7 does.

  

It's sometimes useful to be able to select only the first child of an element, as opposed to all of the children of an element.

To select elements to format that are the first child of their parent:

1.	Type parent, where parent is the selector for the desired element's parent.
2.	Type :first-child (just like that) (Figure 9.18). Figure 9.18. This selector chooses only the p element that is the first child of the gaudi div.

An adjacent sibling is the element that directly precedes the desired element within the same parent element.

Figure 9.19. The first p element contained in the gaudi div is red. The second one isn't.

To select elements to format based on an adjacent sibling:

1.	Type sibling, where sibling is the selector for the element that directly precedes the desired element within the same parent element.
2.	Type + (a plus sign).
3.	If necessary, repeat steps 12 for each successive sibling.
4.	Type tag, where tag is the name of the element you wish to format.

Figure 9.20. This selector chooses only those p elements which directly follow a sibling p element.

Tips

• Also see Parents and Children on page 31.

  Figure 9.21. Only the p elements that directly follow a sibling p element are red. This selector would be useful for indenting all paragraphs except the first.

  

• The :first-child part of the selector is called a pseudo-class, because it identifies a group of elements without you, the designer, having to mark them in the (X)HTML code. It is supported by all major current browsers (including IE starting with version 7).

• Adjacent sibling selectors are currently supported by Firefox, Opera, and IE 7.