Action command syntax

Action commands follow the same syntax as CSS styling assignments, like this:

add-class: .myClass;

You can also use CSS commands in Active CSS config. CSS commands only work though as dynamic styles in an event, so you still need your CSS files for regular styling.

Active CSS command rules:

• Action commands are run in sequence as they appear in the config. This is a different viewpoint to programming in CSS, where all CSS commands looks like they happen at once. In Active CSS the commands can be placed in sequence when needed.
• The name of the action command always comes first, then a colon, then the action value.
• All action commands MUST end in a semi-colon, otherwise you will get a syntax error, or the action will just fail silently.
• Any selectors in action commands follow standard CSS selector rules.
• In an action command, if an Active CSS string is used that contains spaces or a comma, it must be enclosed in double quotes, not single quotes, for example "Hello, world". But you can use whatever quote type you like when you are inserting JavaScript into the config.
• If a string itself contains double quotes, it must be escaped with a backslash, for example "Hello, \"world\"".
• Action commands, like target selectors, are carried out sequentially. This means that they will run one after the other as they appear in the config. This is syntax behaviour as of version 2.3.0.

You can have multiple action clauses per action command for any action command, by separating with a comma, for example:

#MenuItemAbout:click {
    body {
        add-class: .menuOpen, .menuAbout;    /* <--- see here */
    }
}

As action commands in Active CSS are sequential, you can also do this:

#MenuItemAbout:click {
    body {
        add-class: .menuOpen;
        add-class: .menuAbout;
    }
}

The example below is also allowed, and could be used to group actions if you had different multiple event selectors that performed the same action on the same target selector:

#MenuItemAbout:click, #menuItemBlog:click {
    body {
        add-class: .menuOpen;
    }
}

#MenuItemAbout:click {
    body {
        add-class: .menuAbout;
    }
}