Compound Selectors

It’s pretty 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 look for so it can apply CSS formatting rules. For example, a tag selector (not to be mistaken with Dreamweaver’s time-saving selection tool, the Tag Selector) tells a browser to apply 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.)


For a detailed discussion of selectors, visit

But tag, class, and ID 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 laser-focused selectors 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 the term to describe advanced selectors, such as the “pseudo-class” styles you use to format different link states (a:link, a:visited, a:hover, and a:active, as described ...

Get Dreamweaver CS6: The Missing Manual now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.