Help us understand the problem. What is going on with this article?

ピュアCSSでグループ化した項目を表示切り替え

More than 3 years have passed since last update.

screenshot.gif

ラジオボタンやチェックボックスで有効化されたときだけ、グループ化された設定項目が表示されます。

デモ

HTML

.group_trigger クラスを持つ <input> タグがグループ化された項目を切り替えます。そしてグループ化した項目は、.group クラスを持つ要素で囲みます。

<input id='by_token' class='group_trigger' type='radio' name='auth_type'>
<label for='by_token'>By token</label>
<div class='group'>
  <label>Token: <input type='text'></label>
</div>

CSS

.group_trigger クラスの要素の、2つ次の兄弟(sibling)ノードの .group クラスを .group_trigger + * + .group で選択します。+ で次の兄弟ノードなので、.group_trigger の次(+)の任意の要素(*)の次(+)の.group、つまり2つ次の兄弟ノードになります。この .group に対して、デフォルトはdisplay:noneで非表示に、 group_trigger:checked 時はdisplay:block で表示します。これで .group_trigger のチェック状態により、.group の表示/非表示が切り替えることができます。

.group_trigger + * + .group {
  display: none;
}

.group_trigger:checked + * + .group {
  display: block;
}

おわりに

CSSでトリッキーなことするとき、はやくCSS4のセレクタ来ないかなーと思います。<label><input>...</label> としてセレクタにlabel:has(:checked) + .group と書ければ、<input>タグ の id属性 と <label>タグの for属性を削除できます。Browser CSS-Selector-Testでテストすると、素敵なCSS4のセレクタの完全サポートはまだ遠い未来です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした