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.

@if

Syntax

(event selector:event) {
(...)
@if expr {
(...)
(target selector) {
(...)
@if expr {
(action commands)
}
(...)
}
(...)
}
(...)
}

expr (expression) = This can include JavaScript syntax, ACSS conditionals or a mixture of both. See the examples below for possible syntax choice and to see how ACSS conditionals and JavaScript can be used together. The expression should result in boolean "true". JavaScript "anonymous" functions are not allowed in the expression.

The @if statement can wrap around target selectors and action commands. Content placed within the @if statement will only run if the expression passes.

You don't have to put the whole evaluation in parenthesis,  "(" and ")", although you can if you want to.

If you can put a conditional or a pseudo-selector (like :not) onto an event selector or a target selector instead of using an @if statement, then do that instead because it is always quicker to use regular CSS, which performs at the level of the browser itself.

Note: This is quite new, so if you find an expression that you think should work but doesn't work, please let us know via the support form and we'll take a look.

Using ACSS conditionals with @if

When using ACSS conditionals in an @if statement, You do not have to put the "if-" that you would normally use when using ACSS conditionals on event selectors. You can do, but it isn't needed. This was done to save you some typing, and it also makes the syntax easier to read. This is only a feature for @if and @while statements.

For example, if you want to use the conditional "if-inner-html(...)" with an @if statement, just type "inner-html(...)".

For negative conditionals, like not-if-inner-html(...), it becomes "not-inner-html(...)" or "!inner-html(...)" when used with @if.

 

@if - basic use