CSSで条件分岐ができるようになる

2025年10月10日　Posted　野々瀨(フロントエンドエンジニア)

条件に応じてスタイルを変更する場合、JavaScriptやSASSなどのメタ言語を用いる必要がありました。あるいは限定的ですが、@mediaや@supportsなどのアットルールでのみ可能でした。しかし、W3CのCSS Values and Units Module Level 5で、2024年11月に草案としてif関数が登場しました。今回はそんなif関数について軽くご紹介しようと思います。

サポートブラウザー・デバイス

2025年6月時点では、Chrome バージョン137以上、Edge バージョン137以上でのみ対応しています。

https://caniuse.com/mdn-css_types_if

基本的な構文

CSSのif関数は、プロパティの値に対して条件を分岐します。

selector {
  property: if( ... );
}

if関数の引数には、条件（論理式）とそれに一致した場合に返す値をコロンでつなぎ、セミコロンで終了します。
セミコロンは一番最後であれば省略することができます。

p {
  color: if(条件: 真の時の値;);
}

条件は次のいずれかの関数で指定します。

関数名説明構文
style 対象のセレクターに変数がどの値で指定されているかを判定します。 style(変数名: 値)
media メディアクエリに一致するかを判定します。@mediaルールと同じです。 media(条件)
supports CSSの構文がサポートされているかを判定します。@supportsルールと同じです。 supports(条件)

次のコードの場合、p要素に対して変数の値が「dark」の時、文字色を#fff、背景色を#111にします。

p {
  color: if(style(--type: dark): #fff;);
  background-color: if(style(--type: dark): #111;);
}

p:first-child {
  --type: dark;
}

p:nth-of-type(2) {
  --type: light;
}

なお、if関数内では条件として変数を指定する場合、var関数で展開する必要はありません。

次の分岐となる構文

条件と一致した値のペアを続けて指定することで、直前に一致しなかった場合に次の条件を指定することができます。

p {
  color: if(条件: 真の時; 条件: 真の時; ...);
}

.debug {
  background-color: if(
    style(--type: info): #9ec5fe;
    style(--type: warning): #ffe69c;
    style(--type: error): #f1aeb5;
  );

  &.info {
    --type: info;
  }

  &.warning {
    --type: warning;
  }

  &.error {
    --type: error;
  }
}

いずれも一致しなかった構文

また、引数の最後にelse: 偽の時;と指定すると、いずれの条件も一致しなかった場合に値を返すことができます。

p {
  color: if(条件: 真の時; else: 偽の時;)
}

.debug {
  background-color: if(
    style(--type: info): #9ec5fe;
    style(--type: warning): #ffe69c;
    style(--type: error): #f1aeb5;
    else: #ccc;
  );

  &.info {
    --type: info;
  }

  &.warning {
    --type: warning;
  }

  &.error {
    --type: error;
  }
}

複数の条件

論理演算子を用いることで、幾つかの条件に一致した場合に値を返すことができます。
論理演算子は次のいずれかを指定することができます。

論理演算子説明構文
and 前後の条件がいずれも一致するかを判定します。 (条件) and (条件)
or 前後の条件がいずれか一方に一致するかを判定します。 (条件) or (条件)
not 条件に一致しないかを判定します。 not 条件

andとorについては、構文にあるように条件であることが分かるように、丸括弧でくくってあげる必要があります。

次のコードでは、カラム数が2か4の場合、それ以外の場合に分岐しています。

.columns {
  display: grid;
  grid-template-columns: repeat(var(--col), 1fr);
  gap: 10px if(style((--col: 2) or (--col: 4)): 5%; else: 7%);

  &.two {
    --col: 2;
  }

  &.three {
    --col: 3;
  }

  &.four {
    --col: 4;
  }

  .item {
    aspect-ratio: 1 / 1;
    background-color: #ccc;
  }
}

アットルールでも条件分岐が可能に

@whenルールや@elseルールで条件分岐を行うことができます。
@mediaルールや@supportsルールを組み合わせて指定できますし、@elseルールで条件に一致しなかった場合の処理を書くことができます。
@mediaルールはmedia関数、@supportsルールはsupports関数で指定することになります。

@when media (max-width: 640px) {
  .box {
    display: block;
  }
} @else {
  .box {
    display: none;
  }
}

なお、@whenルールおよび@elseルールは2025年6月時点、対応しているブラウザー／デバイスはありません。

https://caniuse.com/css-when-else

ドキュメント

詳しい仕様については、次のW3Cのページをご覧ください。