CSSの構文
基本的な書式
キーワード
文字
ブロック
宣言と属性
ステートメント
@規則
規則集合
コメント
カスケード
!important宣言
構文仕様で用いられる正規表現
トークン
マクロ
コア構文
CSSの構文仕様では、次の様なLex風の正規表現が用いられます。
| オペレーター | 意味 |
|---|---|
| * | 直前のパターンの0回以上の繰り返し。 |
| + | 直前のパターンの1回以上の繰り返し。 |
| [] | 文字の集合。[]内の-は文字の範囲を意味します。例えば、 [A-Z] は、AからZまでの文字のいずれかを意味します。 コア構文仕様では'|'と併用してマクロやトークンなどの定義済みパターンの選択も意味します。例えば、 [ CDO | CDC | S | statement ] は、CDOトークン、CDCトークン、Sトークン、statementコア構文のいずれかがマッチすれば良いことを意味します。 |
| () | グルーピング。演算子の適用範囲を明示するためなどに用いられます。例えば、 u\+[0-9a-f?]{1,6}(-[0-9a-f]{1,6})? の最後の'?'演算子は直前の'('と')'で括られた'-[0-9a-f]{1,6}'に作用します。 |
| ' | シングルクォートで囲まれた文字は文字として識別されます。 |
| | | 論理和。'|'の左右のいずれかがマッチすれば良いことを意味します。 |
| ^ | '['と']'の中の最初の'^'は後に続く文字の補集合を指定することを意味します。例えば、 [^\0-\237] は、\0から\237までの範囲にない文字がマッチします。 |
| ? | オプション。直前のパターンが無くても良いことを意味します。 |
| {} | {n,m}形式の場合は、直前のパターンのn回以上m回以下の繰り返しを意味します。例えば、 [a-z]{1,6} は、'a'～'z'までの文字の1回以上6回以下の繰り返し（つまり1～6文字のアルファベット小文字）を意味します。 コア構文レベルなどでもちられる、{name}形式は、それがnameいう名のマクロであることを意味します。 |
\d+形式の8進数コード（\237など）はISO 10646の定義に従います。
字句レベルでは、CSSはトークンのシーケンスで構成され、正規表現で仕様化されています。
複数のトークンの定義にマッチする場合、最も長いトークンが優先されます。
| トークン | 定義 | 説明 |
|---|---|---|
| IDENT | {ident} | 識別子 |
| ATKEYWORD | @{ident} | '@'から始まる識別子 |
| STRING | {string} | 文字列 |
| BAD_STRING | {badstring} | 不正な文字列 |
| BAD_URI | {baduri} | 不正なURI |
| BAD_COMMENT | {badcomment} | 不正なコメント |
| HASH | #{name} | ハッシュ |
| NUMBER | {num} | 数値（10進整数と固定小数点数） |
| PERCENTAGE | {num}% | パーセンテージ |
| DIMENSION | {num}{ident} | numマクロで検出される数値の後にidentマクロで検出される識別子の続くトークン |
| URI | url\({w}{string}{w}\)|url\({w}([!#$%&*-\[\]-~]|{nonascii}|{escape})*{w}\ | URI |
| UNICODE-RANGE | u\+[0-9a-f?]{1,6}(-[0-9a-f]{1,6})? | - |
| CDO | <!-- | - |
| CDC | --> | - |
| : | : | - |
| ; | ; | - |
| { | \{ | - |
| } | \} | - |
| ( | \( | - |
| ) | \) | - |
| [ | \[ | - |
| ] | \] | - |
| S | [\t\r\n\f]+ | 1個以上のタブ（'\t'）、キャリッジリターン（'\r'）、改行（'\n'）、改頁（'\r'）のいずれか |
| COMMENT | \/\*[^*]*\*+([^/*][^*]*\*+)*\/ | コメント |
| FUNCTION | {ident}\( | - |
| INCLUDES | ~= | - |
| DASHMATCH | |= | - |
| DELIM | 上記の規則に含まれない文字（「"」と「'」も除く） | - |
上記の中括弧({})内のマクロの定義は次の通りです。
| マクロ | 定義 |
|---|---|
| ident | [-]?{nmstart}{nmchar}* |
| name | {nmchar}+ |
| nmstart | [_a-z]|{nonascii}|{escape} |
| nonascii | [^\0-\237] |
| unicode | \\[0-9a-f]{1,6}(\r\n|[\n\r\t\f])? |
| escape | {unicode}|\\[^\n\r\f0-9a-f] |
| nmchar | [_a-z0-9-]|{nonascii}|{escape} |
| num | [0-9]+|[0-9]*\.[0-9]+ |
| string | {string1}|{string2} |
| string1 | \"([^\n\r\f\\"]|\\{nl}|{escape})*\" |
| string2 | \'([^\n\r\f\\']|\\{nl}|{escape})*\' |
| badstring | {badstring1}|{badstring2} |
| badstring1 | \"([^\n\r\f\\"]|\\{nl}|{escape})*\\? |
| badstring2 | \'([^\n\r\f\\']|\\{nl}|{escape})*\\? |
| badcomment | {badcomment1}|{badcomment2} |
| badcomment1 | \/\*[^*]*\*+([^/*][^*]*\*+)* |
| badcomment2 | \/\*[^*]*(\*+[^/*][^*]*)* |
| baduri | {baduri1}|{baduri2}|{baduri3} |
| baduri1 | url\({w}([!#$%&*-~]|{nonascii}|{escape})*{w} |
| baduri2 | url\({w}{string}{w} |
| baduri3 | url\({w}{badstring} |
| nl | \n|\r\n|\r|\f |
| w | [\t\r\n\f]* |
CSSでは、すべてのレベル（バージョン）で同じコア構文を使用します。これにより、ユーザー・エージェントは作成された時点では存在しなかったCSSレベルで書かれたスタイルシートを（少なくとも構文的には）解析することができます。
| stylesheet | [ CDO | CDC | S | statement ]*; |
|---|---|
| statement | ruleset | at-rule; |
| at-rule | ATKEYWORD S* any* [ block | ';' S* ]; |
| block | '{' S* [ any | block | ATKEYWORD S* | ';' S* ]* '}' S*; |
| ruleset | selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*; |
| selector | any+; |
| declaration | property S* ':' S* value; |
| property | IDENT; |
| value | [ any | block | ATKEYWORD S* ]+; |
| any | [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES | DASHMATCH | ':' | FUNCTION S* [any|unused]* ')' | '(' S* [any|unused]* ')' | '[' S* [any|unused]* ']' ] S*; |
| unused | block | ATKEYWORD S* | ';' S* | CDO S* | CDC S*; |
