There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.
Close

Processing...
This may take a few seconds.

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; }

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 be great at Active CSS, you need to have an excellent grasp of CSS selector syntax.

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