Event selectors

An "event selector" is a reference to any element or node on the page, or any group or elements, that receives a JavaScript event. It follows CSS selector syntax.

An "event" is a click event, a mouseover event, or any one of the many JavaScript DOM events.

All event selectors MUST be accompanied with an actual event, separated by a colon (no spaces in between), otherwise you will get a warning message in the console and nothing with happen as expected.

In the following example, the user clicks on the div element which has the id "myDiv" and triggers the click event:

#myDiv:click {
    background-color: magenta;
    color: white;
}

As you have probably guessed, clicking on the element sets a background-colour of magenta and a color of white.

The CSS style change was performed on the element itself ("#myDiv").

You can group together event selectors with commas, and mix up the events, for example:

#myDiv:click, #myDiv2:mouseover {
    background-color: magenta;
    color: white;
}

If you want any element that has a class to respond to a click, you can do this:

.menuItem:click {
    add-class: .selected;
}

In the example above, the event will only fire on the single element that received the click.

You can use all the browser-supported CSS pseudo-selectors, like :not(), etc. Active CSS supports up to and including CSS Level 4 pseudo-selectors, but only on browsers that support these. If a selector doesn't work natively in your browser then it won't work in Active CSS.

With CSS selectors being so fast now, in practical terms you do not need to worry about lots of selectors, or lots of complex selectors slowing the page down. Even on this site which loads up pretty much everything right away as an SPA, it is fast enough in operation even on a slow machine. If speed is a concern, documentation on the speed difference of different types of selectors can be found on the internet, and that can be a way to optimize further. Also, removing or commenting out any event selectors you are not using can help. Each event selector added contributes to the overall speed - you may not notice it, but they can build up, and your user may notice this if they are running on a very old computer.

No CSS hierarchical rules

Events and actions in Active CSS are cumulative in the config. This means that you can have multiple declarations of the same event in different places in your config, all set up to perform different action commands. Active CSS will bundle together all events and all actions and run them all. Note this is different behaviour to CSS. CSS will only apply one particular style to an element and ignore all the others that are lower in the stylesheet hierarchy. In Active CSS, ALL actions happen if they are declared in the config. You don't have to worry about stylesheet hierarchy here, as it does not apply in Active CSS. All events and actions are cumulative. This makes Active CSS slightly easier than CSS to write and debug.