動機

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

セレクタで列挙する


/* チェックされたら表示 */
#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セレクタを使う!

フィルタリングタブ

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

#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行に減ったぜ、、、

実例

See the Pen filteringTab by H-Katz (@HGatz) on CodePen.

まとめ

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