Creating Advanced Selectors

Elements in HTML can nest. Inside the body might be a div named content , with a div named newitem nested inside that. Each of these nested elements exists in a parent-child relationship that allows CSS properties to be inherited. The child elements are descendants of the parent elements and inherit properties from them.

Descendant elements can be pinpointed precisely to create extremely selective selectors. Take the lowly list item, or li. If you redefine the li tag, you style every list item anywhere in the body. However, if you have div named content , and a li within that, you can write a style for the selector #content li . Instead of styling every li anywhere in the document, it will only style each li inside the content div .

Dreamweaver calls contextual selectors like this advanced . There's more about advanced selectors in the "Advanced Terminology" sidebar, later in this chapter.

To create an advanced style:

1.	With a page open in Dreamweaver, click the New CSS Rule button in the CSS Styles panel. The New CSS Rule dialog appears ( Figure 5.18 ). Figure 5.18. The pseudo-class selectors are available from a pop-up menu for Advanced selector types.
2.	Set Selector Type to Advanced (IDs, pseudo-class selectors). For Selector, one of the pseudo-class selectors may appear in the dialog by default. Select a pseudo-class selector from the pop-up menu or type a selector of your own choosing in this field by doing one of the following: Type a pound sign ( # ) and the id name to style a named section of the pageusually a div ( Figure 5.19 ). Figure 5.19. A selector based on an id must begin with a pound sign ( # ). or Type a pound sign ( # ), the id name, and a space before the pseudo-class selector to style only those navigation links in a particular named section of the page ( Figure 5.20 ). Figure 5.20. Type in the Selector field to create selectors that fit your document. or Type a pound sign ( # ), the id name, a space, and an HTML tag to style an element found only in the named section of the page ( Figure 5.21 ). Figure 5.21. A contextual selector lets rules apply to only tags within certain named divs. or Type a group of selectors, separated by a comma and a space, to assign the same style properties to every selector in the group with a single rule ( Figure 5.22 ). Figure 5.22. Every tag in this group list of selectors will follow the same style rule.
3.	Click OK, and the CSS Rule definition dialog appears.
4.	When you've completed filling out the CSS Rule definition dialog, click OK to accept your changes.

Tips

• Rules for the pseudo-classes won't work reliably with the cascade unless you define them in the following order: a:lin k, a:visited , a:hover , a:active . A way to remember the L-V-H-A order is the memory device LoVeHAte.

• If you use the Insert Div Tag button from the Insert Bar (found in both the Common and Layout categories) to insert a div , Dreamweaver offers you the chance to create a new advanced style for the div immediately ( Figure 5.23 ). Click the New CSS Style button in the Insert Div Tag dialog to define properties for the new div .

  Figure 5.23. Dreamweaver politely suggests that you create a new style for a new div as soon as you insert it in your document.