数量セレクタ（Quantity Queries）

2015年11月10日 著

日本語では何て訳すのが一般的かわかりませんが、Quantity Queriesをここでは「数量セレクタ」と称することにします（厳密には「数量クエリー」なのでしょうけど、セレクタと呼んだほうがしっくりしたので）。しばらく前からその数量セレクタに関する記事はいくつか見かけたことがあり、実際A List Apartの記事「Quantity Queries for CSS」も斜め読んではいたのですけど、正直あまりちゃんと理解していませんでした。

昨日、偶然「Using Quantity Queries to write content-aware CSS」という別の記事を読んだところ、そこにあった解説が非常に分かりやすかったのと、著者が実際にそれを使った実例（タグクラウドの実装）をアニメーションで表示してくれていたのを見、ようやく腹落ちしたというか、そういうことだったのねと。数量セレクタは

• :first-child 擬似クラス
• :nth-last-child 擬似クラス
• 一般兄弟セレクタ

の合わせ技で実現されます。特定の（DOMツリーにおいて同じ親ノードをもつ）要素の数量に応じたスタイル付けを実現するもので、先述の記事にあったタグクラウドの例では、タグに display:block; のスタイルを当てておき、タグの数が5個以上になったら display:inline-block; とすることで、見た目上のバランスを保つよう工夫をしていました。

後ろから数えてn番目、という :nth-last-child 擬似クラスの使い所ってあまりイメージできてなかったけど、数量セレクタみたいな使い方はまさに打って付けというか、よく考え付いたな......Paul Irish氏の指摘するパフォーマンスへの影響を無視できる場面でなら使ってみたい。