☰

CSS は要素の子の数を検出できますか? 質問する

tag-icon • tag-icon css css-selectors
CSS は要素の子の数を検出できますか? 質問する

おそらく自分自身の質問に答えているのでしょうが、非常に興味があります。

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

例えば

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

奇妙に聞こえるかもしれませんが、マネージャーに調べるように言われ、自分では何も見つからなかったので、検索を終了する前に SO に頼ることにしました。

ベストアンサー1

説明:

元の質問の以前の表現が原因で、数人の 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の例:

出典:

おすすめ記事