Style Sheets Guide
=Selector Shorthand Notations=

= Index DOT Html by Brian Wilson [bloo@blooberry.com] =

Main Index | Style Sheet Index | Element Tree | Element Index | HTML Support History


Selector Grouping
[ IE3B1 | N4B2 ]
Multiple Selectors can be addressed in a single style declaration by separating them with commas.
Example:
H1, H2, H3 { font-family: helvetica }

Contextual Selectors
[ IE3B1 | N4B2 ]
HTML elements are nestable, and there are situations where you will want to apply styles in only some element nesting contexts. Contextual Selectors make this possible. By using a space separated list of Selectors (tags, Pseudo-Elements, Pseudo-Classes, Classes or IDs), a search pattern is established. Nesting order is established with the left-most Selector being the highest level parent element. The Selector on the right-hand side is the element the property will apply to. Keep in mind that any valid Selector type is valid to use (even the other shorthand ones listed here.)
Examples:
Apply a red font color to only those emphasized elements in level 1 Headings:
    h1 em { color: red }
Apply an image background and font size to all Keyboard sections in Division Class 'special':
    div.special kbd { background: url(image.gif); font-size: large }
Use strikethrough text on list items with at least two Unordered List structure ancestors
    ul ul li { text-decoration: line-through }

Class Selectors
[ IE3B1 | N4B2 ]
CLASS is a new HTML tag attribute that can be applied to any tag for use in External and Document Level Style Sheets. Classes establish grouping schemes for identifying HTML tags within a Style Sheet. Different HTML tag types can share the same Class Name value - this allows an entire class to be identified by a common label.
[To see more about how these attributes are specified within HTML tags, see the pages on DIV and SPAN]
Usage:
A CLASS attribute may be used to reference either all tags or only selective tags within the Class. A period (".") is used in the Selector to identify what follows as a Class Name. If the author wishes to address a specific element within the Class, use as a Selector the element joined to the Class Name by a period (ex: 'H1.classname'.) To specify ALL elements in the class, use only the Class Name with a leading period as a Selector(ex: '.classname'.)
Examples:
All tags in CLASS 'redtags':
    .redtags { color: red }
Heading Level 1 tags in CLASS 'redtags':
    H1.redtags { color: red }

ID Selectors
[ IE3B1 | N4B2 ]
ID is another new HTML tag attribute that can be applied to any tag using External and Document Level Style Sheets. It is an alphanumeric string used to give a single tag a distinct identifying label. Two tags may not share the same unique ID.
[To see more about how these attributes are specified within HTML tags, see the pages on DIV and SPAN]
Usage:
To address a specific singular tag, use its distinct ID#. When using it as a Selector, the ID label must be preceded by the '#' sign (ex: '#foobar1'). Using the ID is all that is necessary to identify a single tag instance, so the HTML tag name is omitted.
Example:
The specific STRONG tag with ID: 'abc123':
    #abc123 { font-size: x-large }

Boring Copyright Stuff....