[解決済み] CSSは要素が持つ子供の数を検出することができますか？

質問

自分の質問に自分で答えているようですが、非常に興味があります。

CSS で親の子を個別に選択できることは知っていますが、親がある程度の数の子を持っている場合、コンテナの子にスタイルを設定するサポートはありますか。

例えば

container:children(8) {
  // style the parent this way if there are 8 children
}

変な話ですが、マネージャーから調べてくれと言われ、自分では何も見つからなかったので、検索を終了する前にSOに頼ることにしました。

どのように解決するのですか？

明確にしてください。

元の質問の言い回しが悪かったため、数人のSO市民から、この回答は誤解を招く恐れがあるとの懸念が寄せられました。CSS3では、スタイルが 親ノード 子プロセスの数によって異なります。しかし、スタイル できる の数に基づいて、子ノードに適用されます。 兄弟姉妹 を持つ。

オリジナルの回答です。

信じられないことに、これが純粋にCSS3で可能になったのです。

/* one item */
li:first-child:nth-last-child(1) {
/* -or- li:only-child { */
    width: 100%;
}

/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
    width: 50%;
}

/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
    width: 25%;
}

コツは、最後の子からn番目の子でもあるときに、最初の子を選択することです。これは、兄弟姉妹の数によって効果的に選択するものです。

この技術は、André Luís（発見者）とLea Verou（改良者）の手によるものです。

CSS3が好きなだけでは？????

CodePenの例。

• https://codepen.io/mattlubner-the-decoder/pen/ExaQZQR

情報源

• http://andr3.net/blog/post/142 （アンドレ・ルイス）
• http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ (Lea Verou)