閲覧者がカーソルを載せた時、そのボックスが画面に出現した時など、特定の条件でボックスのスタイルを変化させられます。
ボックスを選択し、エディター右上「条件付きスタイル」を開き項目をクリックすると、その条件を満たした状態でのスタイル編集モードになります。
この編集モードは、全く別のボックスを選択するか、条件をもう一度クリックすると解除できます。
条件付きスタイルを設定している時、その設定欄の右上「×」アイコンをクリックすると、その設定を解除できます。または、条件の右にある「×」アイコンをクリックすると、その条件付きスタイルをまとめてリセットできます。
条件付きスタイルは、大きく次の「グループ」に分かれています。
カーソル
ホバー、（in）ホバー
閲覧者がカーソルを載せたときのスタイルを変化させます。
一般的には、どの要素がクリックできるのかを閲覧者に伝えるために用います。
「（in）ホバー」は、ホバーを設定した要素の中にある要素に、さらに別のスタイルを付け加える時に使います。このように、「ボタンの中で矢印だけ色を変える」といった表現ができます。
親となるボックスで何らかの「ホバー」を設定していないと、「（in）ホバー」の設定はできないので注意してください。
フォーカス
設置したフォームの入力欄や選択肢のスタイルを、閲覧者が入力または選択している間だけ変化させます。
カーソル操作だけでなく、キーボード操作や音声入力ソフトでの選択時にも適用されます。
クリック中
設置したフォーム送信ボタンのスタイルを、閲覧者がクリックしている間だけ変化させます。
リンク
現在のページ
シンボル内、かつページ（サイト内）リンクを設定したボックスで利用できます。
ページリンク先と閲覧中のページが同じ時だけスタイルを変更します。閲覧者に、「あなたはそのリンク先のページを今閲覧している」と視覚的に伝えることができます。
「下層ページも含む」をONにすると、そのページリンク先の下層ページを閲覧している時にもスタイルを変更します。
例えば、ページリンク /company を設定したボックスでONにすると、 /company/about を閲覧している時にもそのスタイルが適用されます。
※「ホーム」ページには「下層ページも含む」設定が適用できません
アニメーション
出現時
画面の読み込みやスクロールによってブラウザ画面内に登場する直前のスタイルを設定できます。
例えば、条件「出現時」の編集モードで不透明度を０（透明）にし、条件解除時点では１（不透明）にしておけば、ふわっと登場するかのようなアニメーションを表現できます。
※レイヤーパネルで一番上位のボックス（レイヤー）には設定できません
リスト
最初のアイテム
CMSリストや、手動でリスト化したボックスで利用できます。
リストの先頭のアイテムだけスタイルを変更できます。最新のブログ記事を目立たせたい時などに役立ちます。
カスタム
ブール値プロパティが有効なCMSモデルを紐づけた動的ページ・動的リストで利用できます。
該当のブール値がON（true）になっている場合のスタイルを設定できます。
ブール値プロパティについて、こちらの記事をご覧ください。
インホバー in:hover ホバーアクション