ボタンをクリックしたのに色が変わらない、別の場所をクリックしたら変わる、といった現象に遭遇したことはないでしょうか。
この記事では、よく使う疑似クラスの違いと使い方を整理します。
（Panda CSSを用いた例で紹介)
_hover：マウスが乗ったとき
_hover: {
bgColor: "gray.100",
}
どんな状態か
マウスカーソルが要素の上にある状態です。
使いどころ
- ボタンが押せることを伝える
- リスト項目の強調表示
_hover: {
bgColor: "gray.100",
cursor: "pointer",
}
_active：押している瞬間
_active: {
bgColor: "gray.200",
}
どんな状態か
クリックしている最中の一瞬だけ適用されます。
使いどころ
- ボタンが押された感覚を出す
_active: {
transform: "scale(0.98)",
}
少し縮めたり、色を濃くすることで「押した感」を表現できます。
_focus：フォーカスが当たっている状態
_focus: {
outline: "2px solid blue",
}
どんな状態か
要素が選択された状態です。
- クリック後も残る
- Tabキーで移動したときにも付く
注意点
クリック後にスタイルが残るため、意図しない見た目になることがあります。
_focusVisible：キーボード操作時のみフォーカス
_focusVisible: {
outline: "2px solid blue",
}
_focusとの違い
-
_focus：クリックでも表示される -
_focusVisible：キーボード操作時のみ表示される
使いどころ
クリック時の見た目は崩さず、キーボード操作には対応したい場合に使います。
その他よく使う疑似クラス
_disabled：無効状態
_disabled: {
opacity: 0.5,
cursor: "not-allowed",
}
入力が足りないときや送信中のボタンに使います。
_checked：選択状態
_checked: {
bgColor: "blue",
}
チェックボックスやラジオボタンに使います。