TIL

Today I Learned. 知ったこと、学んだことを書いていく

タブの表示２ - CSS

CSS HTML テキストエディタ作成

CSSだけでタブを表示するやつを昨日書いたけど、他にもいい方法がないか探していたところ、JavaScriptで追加し他要素にも対応できそうな書き方があったため、実装してみた

↓昨日書いたやつ

タブの表示 - CSS - TIL

See the Pen dmEGry by tamago (@tamago324) on CodePen.

<ul>
  <li id="tab1"><label for="radio1">TAB 1</label></li>
  <li id="tab2"><label for="radio2">TAB 2</label></li>
  <li id="tab3"><label for="radio3">TAB 3</label></li>
</ul>
<div>
  <input id="radio1" class="tab-input" type="radio" name="tab-input">
  <div class="content">CONTENT 1</div>
  <input id="radio2" class="tab-input" type="radio" name="tab-input">
  <div class="content">CONTENT 2</div>
  <input id="radio3" class="tab-input" type="radio" name="tab-input">
  <div class="content">CONTENT 3</div>
</div>

.tab-input {
  display: none;
}

.content {
  display: none;
}

[id^="radio"]:checked + div {
  display: block;
}

ポイント

ラジオボタンとコンテンツは隣同士にする

関連するラジオボタンとコンテンツを隣同士にすることでCSSで+が使えるようになる
+は隣の要素という意味
ラジオボタンにチェックが付いたら隣のdivを表示するといったような事ができる

<input id="radio1" class="tab-input" type="radio" name="tab-input">
<div class="content">CONTENT 1</div>

[id^="radio"]:checked + div {
  display: block;
}

正規表現的なセレクタを使う

[id=^"radio"]のような正規表現みたいな感じでスタイルを設定できる
[id=^"radio"]は「idがradioで始まる要素」というセレクタになる

[id^="radio"]:checked + div {
  display: block;
}

参考文献