ボタンをクリックしたのに色が変わらない、別の場所をクリックしたら変わる、といった現象に遭遇したことはないでしょうか。

この記事では、よく使う疑似クラスの違いと使い方を整理します。
（Panda CSSを用いた例で紹介)

_hover: {
  bgColor: "gray.100",
}

どんな状態か

マウスカーソルが要素の上にある状態です。

使いどころ

_hover: {
  bgColor: "gray.100",
  cursor: "pointer",
}

_active: {
  bgColor: "gray.200",
}

どんな状態か

クリックしている最中の一瞬だけ適用されます。

使いどころ

_active: {
  transform: "scale(0.98)",
}

少し縮めたり、色を濃くすることで「押した感」を表現できます。

_focus: {
  outline: "2px solid blue",
}

どんな状態か

要素が選択された状態です。

注意点

クリック後にスタイルが残るため、意図しない見た目になることがあります。

_focusVisible: {
  outline: "2px solid blue",
}

使いどころ

クリック時の見た目は崩さず、キーボード操作には対応したい場合に使います。

_disabled：無効状態

_disabled: {
  opacity: 0.5,
  cursor: "not-allowed",
}

入力が足りないときや送信中のボタンに使います。

_checked：選択状態

_checked: {
  bgColor: "blue",
}

チェックボックスやラジオボタンに使います。