Target selectors

What if you want to effect changes on a different element than the one receiving the event?

This is the purpose of "target selectors". A target selector refers to an element or elements that you want actions to apply to.

Let us say for example, that you want to add a class to the body node when a menu button is clicked on. You want to tell the body that the menu is now open. So in this next example we will add a class to the body called "menu-open".

Each of your menu "a" tags have a class of "menuItem". When a user clicks on an element that has the class "menuItem", this event occurs:

.menuItem:click {
    body {
        add-class: .menu-open;
        remove-class: .something;
    }
}

There are a few points to pay attention to in the above example:

• All commands in Active CSS run in sequence, in the order that they appear in the config. This includes target selectors. So if you want something to happen after something else, just move its position in the config file. In Active CSS you can control the order of actions (since version 2.3.0 of the core).
• When a specific element with the class "menuItem" is clicked, this event will occur. A single event only ever occurs on ONE element or node. Ie. If the element clicked on has the class "menuItem", this event will fire. It only fires on one item at a time - in this case the element that was clicked on.
• The target selector, in this case the body node, is written inside the event selector. All target selectors are inside event selectors and never outside.
• The action command "add-class"  will add a class to all elements that match the target selector, but in this example it will only add a class to the body node. At other times you may want to target more than one item at once. Also the class will not be added twice if it is already present.
• Classes are always prefixed by a ".", and ids are always prefixed by a "#", in event and target selectors, and also wherever used in an action command. This is so we can see the difference between ids and classes when we are reading the code. This can be a typo - it can just get left out altogether - so it gets a special mention.
• All action commands end with a semi-colon. This is not optional. Again, this can be a typo.
• Another typo is leaving out the ":click" altogether! Be aware of these.

In the next example, we will change the style of all the menu buttons when a button is clicked.

In other words, the target selector will perform the action on ALL elements found with the class "menuButton":

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

It can be preferable to add a class instead of manually adding specific styles. In this next example, the class "highlight" is added to all elements that have the class "menuButton":

#myDiv:click {
    .menuButton {
        add-class: .highlight;
    }
}

You can also group together target selectors with commas, following CSS rules, for example:

#content:click {
    #myDiv, .mainClass {
        background-color: magenta;
        color: white;
    }
}

As you can see above with the target selectors, Active CSS follows the same syntax as CSS. You can get as complex as you like with the target selectors, like you can with the event selectors.

Like with the event selectors, you should not need to worry about the speed of complex selectors unless you notice a visible delay. For most websites it will be fast enough, in practical terms. If you are targeting thousands of elements at once, you could always parse out to a function from an event (with the "func" action command) and make manual changes to the DOM from there if the internal handling of the target selectors are too slow. If this happened, and it is unlikely just for a regular website, you could manually set up external JavaScript events to handle the event causing the slowness, and just take advantage of Active CSS for more general events. We have not found any need to do this for the websites we have been building with Active CSS, but we mention this because at some point some developer somewhere will need to do an intense selector speed comparison on a page with 100,000 elements... In practical scenarios like this, for instance a spreadsheet application, the right call would be to use classes so you are only using a dozen or so actual event selectors.

Using "&" in the target selector

You can use "&" anywhere in the target selector. You can use it at the beginning, end or in the middle of the target selector - anywhere is fine.

For example, this is just standard CSS with the "&" referencing the event selector:

#addclassButton:click {
    & + div {
        add-class: .magentaBackground;
    }
}

Using "<" in the target selector

With target selectors, you can use "<" to go up to the next closest selector and then go on from there to find the selector you need.

It is useful when you are trapping a click and want to affect something higher up the DOM tree, like a parent container. Maybe change a class or something. It saves you having to get fancy with code.

This is a special ACSS only combinator and isn't in the CSS spec at all.

See the docs page on the closest Combinator for more information on that.