RK* - rikkertkoppes.com


css syntax in graph

Here are some drawings of what the CSS syntax is about. In words, it can be found here for CSS 2.1 and here for CSS 3. I tried to catch these rather abstract descriptions into the images displayed below. I borrowed the style from the images found at json.org.

The CSS 3 additions are in blue. I followed CSS 3 terminology and text and made some notes about CSS 2.1.

A selector is a chain of one or more sequences of simple selectors separated by combinators.

Combinators are: white space, "greater-than sign" (U+003E, >), "plus sign" (U+002B, +) and "tilde" (U+007E, ~). White space may appear between a combinator and the simple selectors around it. Only the characters "space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return" (U+000D), and "form feed" (U+000C) can occur in white space. Other space-like characters, such as "em-space" (U+2003) and "ideographic space" (U+3000), are never part of white space.

CSS3 Selectors - 4. Selector syntax

When several selectors share the same declarations, they may be grouped into a comma-separated list. (A comma is U+002C.)

CSS3 Selectors - 5. Groups of selectors

Note that the tilde combinator is new in CSS 3, it is the general sibling combinator. It is supported in all major browsers. Note that in IE6 only the whitespace combinator is supported.

A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, content selector, or pseudo-class. One pseudo-element may be appended to the last sequence of simple selectors.

CSS3 Selectors - 4. Selector syntax

Note that the content selector is new in CSS 3.

Note that if the universal selector is not the only component of a sequence of simple selectors, the * may be omitted.

A rule set (also called "rule") consists of a selector followed by a declaration block.

A declaration-block (also called a {}-block in the following text) starts with a left curly brace ({) and ends with the matching right curly brace (}). In between there must be a list of zero or more semicolon-separated (;) declarations.

The selector (see the Selectors module [SELECT]) consists of everything up to (but not including) the first left curly brace ({). A selector always goes together with a {}-block. When a user agent can't parse the selector (i.e., it is not valid CSS3), it must ignore the {}-block as well.

CSS3 syntax - 4.8. Rule sets, declaration blocks, and selectors

A declaration is either empty or consists of a property, followed by a colon (:), followed by a value. Around each of these there may be whitespace.

Because of the way selectors work, multiple declarations for the same selector may be organized into semicolon (;) separated groups.

CSS3 syntax - 4.9. Declarations and properties

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.

Additional resources (top 15)

Below is a list of additional resources that might contain extra information about the subject at hand. These are all sites linking to this one (i.e. backtracking).

  1. Cascading Style Sheets (19229)
older articles

AdministrationAtom feed