CSSでフィルタリングタブ

# 動機

* タブ切り替え時、未選択状態では**全て**表示しておいてもらいたい
* しかし、既存のタブ切り替えの初期状態は、
    * 選択されるまでコンテンツは非表示
    * どれが一つが選択されている(たいてい最初の項目)
* どうすればいいのか?

---

# セレクタで列挙する

```CSS

/* チェックされたら表示 */
#members:checked          ~ * ul.members li,                                                                                                                        
#blueprints:checked       ~ * ul.blueprints li,                                                                                                                     
#notations:checked        ~ * ul.notations li{                                                                                                                      
    display: block;                                                                                                                                                 
}                                                                                                                                                                   
                     
/* チェックされてなかったら非表示 */                                                                                                                                               
#members:not(:checked)          ~ * ul.members li,                                                                                                                  
#blueprints:not(:checked)       ~ * ul.blueprints li,                                                                                                               
#notations:not(:checked)        ~ * ul.notations li{                                                                                                                
    display: none;                                                                                                                                                  
}                                                                                                                                                                   
                                
/* 全部チェックされてなかったら表示 */                                                                                                                                    
#members:not(:checked) ~ #blueprints:not(:checked) ~ #notations:not(:checked) ~ * ul.members li,                                  
#members:not(:checked) ~ #blueprints:not(:checked) ~ #notations:not(:checked) ~ * ul.blueprints li,                               
#members:not(:checked) ~ #blueprints:not(:checked) ~ #notations:not(:checked) ~ * ul.notations li                                 
{                                                                                                                                                                   
    display: block;   
}

```

---
# 欠点

* 書き下すのがめんどくさい
* 有限ならまだしも、動的に項目数が変わった場合とかどうすんの!?
* **なんとかならないものか...**


---
# タブ切り替え再考

* これから表示するものを選択する**のではない**
* 表示しているものから**抽出して**表示したいのだ
* 既存のタブ切り替えと違うのであるから、従来のやり方では無理がある

* 挙動から**フィルタリングタブと命名(my造語たぶん)**

---
# 方針

* 素直に、表示している状態を初期状態として
* 選択したもの**以外を非表示に**すれば良い
* そのためには...? notセレクタを使う!

---
# フィルタリングタブ

* 選択された項目の識別子を持たない要素の子要素は、非表示

```CSS
#members:checked          ~ * label ~ ul:not(.members) li,
#blueprints:checked       ~ * label ~ ul:not(.blueprints) li,
#notations:checked        ~ * label ~ ul:not(.notations) li{
    display: none;
}
```

* 1/3行に減ったぜ、、、

---
# 実例

<p class="codepen" data-height="500" data-theme-id="0" data-default-tab="html,result" data-user="HGatz" data-slug-hash="zeWyJb" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="filteringTab">
  <span>See the Pen <a href="https://codepen.io/HGatz/pen/zeWyJb/">
  filteringTab</a> by H-Katz (<a href="https://codepen.io/HGatz">@HGatz</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

---
# まとめ

* 表示したものから条件で抽出して表示したい場合、notセレクタを使えば短くできる
* 項目が動的に増えても、増えた分類に対して1行CSSを追加するだけで良い