Compound Selectors

It’s relatively easy to learn how to use tag, class, and ID styles. To be technically accurate, all these styles aren’t really styles. In CSS lingo, they’re selectors, instructions that tell a browser what it should apply the CSS formatting rules to. For example, a tag selector (not to be mistaken with Dreamweaver’s time-saving selection tool, the Tag selector) tells a browser to apply the formatting to any instance of a particular tag on the page. Thus, browsers apply h1 tag styles to all <h1> tags on a page. They apply class selector styles, on the other hand, only when they encounter the class name attached to an element on a page. Similarly, browsers apply ID selector styles to a tag with a matching ID name: for example, <body id="home">. (Flip back to Types of Styles for a review of key differences between class and ID selectors.)

Note

For a detailed discussion of selectors, visit http://css.maxdesign.com.au/selectutorial/.

But tag, ID, and class selectors are just the tip of the selector iceberg. CSS offers many other selector types that let you format even the smallest page element; Dreamweaver lumps these selectors together under the term compound selectors. “Compound selector” is a Dreamweaver term, not a CSS term, so don’t go using it at your weekly web designer get-togethers. Dreamweaver uses it to describe advanced types of selectors, such as the “pseudo-class” styles you use to format different link states (a:link, a:visited, a:hover, and a:active, as ...

Get Dreamweaver CS5: The Missing Manual now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.