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.

The event flow for actions

This section covers the order in which action commands are run in event declarations. In general, it is pretty obvious - the commands are run in sequence flowing downwards through your config.

But in the case of running target selectors, in exactly which order do commands run?

This is important to know if you need to incorporate pauses or delays and need to know what sequence the event flow takes by default.

 

Let's take this scenario:

div:click {
span {
background-color: blue;
color: white;
}
}

If you had four spans, would it run all of the commands on the first span, then all commands on the second one, etc.?

Or would it run the first command on the first span, the first command on the second span, etc. then run the second command on the first span, the second command on the second span, etc.?

Here is the answer:

Span tag 1: runs background-color: blue;

Span tag 1: runs color: white;

Span tag 2: runs background-color: blue;

Span tag 2: runs color: white;

Span tag 3: runs background-color: blue;

Span tag 3: runs color: white;

Span tag 4: runs background-color: blue;

Span tag 4: runs color: white;

See this example below to see it in action. The await option on the after 1s action commands - operating on 4 separate span tags from a click event - makes the event flow easy to see. Remember, there is only one event flow running here. This example visually demonstrates the exact flow the core takes when iterating through your config commands. Normally you wouldn't even notice this, but when you start using pause and await this information becomes quite important, so that you don't go "Huh?".

Using the "await" option in a single event with multiple targets

That should clear up which sequence the event flow takes during regular operation. The browser usually executes action commands fast enough so that everything looks like it's happening at once, so you may not have fully realised that action commands flow in the way they do.

The target selector "parallel" option

Maybe you need the target selector event flows to run simultaneously. You can do this by using the parallel option.

Putting a parallel option onto the target selector gives a different flow:

Span tag 1: runs background-color: blue;

Span tag 2: runs background-color: blue;

Span tag 3: runs background-color: blue;

Span tag 4: runs background-color: blue;

Span tag 1: runs color: white;

Span tag 2: runs color: white;

Span tag 3: runs color: white;

Span tag 4: runs color: white;

 

See this example:

The "pause" command

You would generally use the parallel option if you are using delayed actions and you need this parallel event flow to make things happen in a certain way. Its use depends on what you are trying to achieve.

You can also simulate the parallel event flow by placing your event into its own event. Doing this will give you what appears to be a parallel event flow. In reality, each event in ACSS is its own thing, so of course if you set up multiple events then they are going to appear as if they are happening at the same time.

Using the "await" option with a single target in multiple events