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)
} @else if expr {
(action commands)
} @else {
 (action commands)
}
(...)
}
(...)
 } @else if expr {
(action commands)
} @else {
(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". Raw JavaScript is allowed, but "anonymous" functions are not allowed in the expression.

The @if statement can wrap around target selectors and action commands, and these can be nested within other @if statements. Content placed within the @if statement will only run if the expression passes.

You can have multiple @else if statements. There can only currently be one @else statement, to follow conventions from other languages. Note that in the future this may get expanded to include allow multiple @else statements that themselves contain expressions if certain proposals to CSS get adopted to allow multiple @else statements on other appropriate @ type statements. It's not a big deal to add it to ACSS later on if CSS does get weird in this way.

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

If you can use CSS instead, then use it instead of this. 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. Although in practically terms you probably would not notice the speed difference for a regular website.

 

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