A simple selector is an HTML element type, either by itself or followed immediately by any combination (in any order) of a single ID, one or more classes, and a pseudo-class. The universal selector (*) is also considered a simple selector, though it applies to every element in a page. When a selector matches an element in a page, the style rule associated with the selector is applied to the matching element.

Simple selectors can be chained together by characters that indicate the relationship between selectors. Such characters specify contextual relationships between simple selectors, such as descendant, child, and adjacent sibling relationships. The following style rule reduces the amount of space between top-level headings when they appear immediately adjacent to each other in the document tree.

h1 + h2 {margin-top: -5mm;}

To reduce the size of style sheets, multiple selectors can be grouped in comma-separated lists. The comma character is a shorthand mechanism used to apply one declaration block to multiple element types.

h1, h2, h3 {font-family: helvetica;}

When grouping selectors, remember that the comma starts an entirely new selector from the beginning.

Community Additions