What is a Selector?

A "selector" in Active CSS is the same as a selector in CSS. In Active CSS, the first line of the event declaration is always the event selector. The selector refers to the element or elements that are being set up to receive the event.

For example:

In CSS, you put a hover event on an element like this:

a:hover {
    background-color: magenta;
    color: white;
}

In Active CSS, you put a JavaScript mouseover event on an element like this:

a:mouseover {
    background-color: magenta;
    color: white;
}

In both examples, the event selector was the "a" tag.

To refer to an element with an id, the event selector starts with a "#", for example:

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

To refer to an element by class, the event selector starts with a ".", for example:

.myDivs:mouseover {
   background-color: magenta;
   color: white;
}

That's a good one, because doing the same thing with JavaScript requires iterating elements, and you don't have to do any of that in Active CSS. Plus the events are persistent, and only go into effect if the elements are actually on the page.

You can get quite complex with the selectors, using exactly the same syntax as CSS, for example:

body.menu-open .menu-item:not(.selected):mouseover {
    background-color: magenta;
    color: white;
    add-class: .animation-menu;
}

Using complex selectors in JavaScript or Active CSS is blazingly fast these days. This was not always the case. Without this change in native speed, it is unlikely Active CSS would have been possible to build. Active CSS makes full use of this increase in browser-native selector speed.

To get really good at coding in Active CSS, it is recommended to get an excellent grasp of CSS selector syntax.

For more information about CSS selector syntax, search the general internet for "CSS Tutorial".