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（AndréLuís）
• http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/（Lea Verou）

いいえ、そうではありません。いくつかのセレクターがいくつかありますが、この例では機能せず、ブラウザーの互換性が最適ではありません。

:only-child

:only-child要素の親の一人の子供がある場合、それが適用さだけだという意味でも数少ない真の計数セレクタの一つです。理想化された例を使用すると、children(1)おそらくそれは同じように動作します。

:nth-child

:nth-childあなたが本当にやりために探しているものに応じてどこへ行きたいかセレクタは実際にあなたを得る可能性があります。8人の子供がいる場合にすべての要素をスタイルしたい場合は、運が悪いです。ただし、8番目以降の要素にスタイルを適用する場合は、次のことを試してください。

p:nth-child( n + 8 ){
    /* add styles to make it pretty */
}

残念ながら、これらはおそらくあなたが探している解決策ではありません。最後に、おそらく数に基づいてスタイルを適用するためにいくつかのJavaScriptウィザードを使用する必要があります-これらの1つを使用する場合でも、純粋なCSSソリューション。

疑似クラスのW3 CSS3仕様

編集私はあなたの質問を少し異なって読みました- 子供ではなく親をスタイルする方法が他にもいくつかあります。他のいくつかのセレクターをあなたのやり方で投げましょう：

:empty そして :not

これは、子を持たない要素をスタイルします。それ自体はそれほど便利ではありませんが、:notセレクターと組み合わせると、子を持つ要素のみにスタイルを設定できます。

div:not(:empty) {
    /* We know it has stuff in it! */
}

ここでは、純粋なCSSで使用できる子の数を数えることはできませんが、クールなことを実行できる別の興味深いセレクターです。

注：このソリューションは、特定の長さのセットの子を返しますが、要求した親要素は返しません。うまくいけば、それはまだ便利です。

Andre Luisがメソッドを考え出しました：http : //lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/残念ながら、これはIE9以降でのみ機能します。

基本的に、：nth-​​child（）を、要素の位置を処理する他の疑似クラスと組み合わせます。このアプローチでは、特定の長さの要素のセットから要素を指定できます。

たとえば:nth-child(1):nth-last-child(3)、セットの最初の要素と一致し、セットの最後から3番目の要素でもあります。これは2つのことを行います。セットに3つの要素しかないことと、3つのうちの最初のものがあることを保証します。3つの要素セットの2番目の要素を指定するには、を使用します:nth-child(2):nth-last-child(2)。

例1-セットに3つの要素がある場合、すべてのリスト要素を選択します。

li:nth-child(1):nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):nth-last-child(1) {
    width: 33.3333%;
}

Lea Verouの例1の代替：

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

例2-3つのリスト要素を持つセットの最後の要素をターゲットにします。

li:nth-child(3):last-child {
    /* I'm the last of three */
}

例2の代替：

li:nth-child(3):nth-last-child(1) {
    /* I'm the last of three */
}

例3-4つのリスト要素を持つセットの2番目の要素をターゲットにします。

li:nth-child(2):nth-last-child(3) {
    /* I'm the second of four */
}

Mattのソリューションを元に、次のCompass / SCSS実装を使用しました。

@for $i from 1 through 20 {
    li:first-child:nth-last-child( #{$i} ),
    li:first-child:nth-last-child( #{$i} ) ~ li {
      width: calc(100% / #{$i} - 10px);
    }
  }

これにより、アイテムの数をすばやく拡張できます。

はい、nth-childを使用してこれを行うことができます

div:nth-child(n + 8) {
    background: red;
}

これにより、8番目のdiv子以降が赤になります。お役に立てれば...

また、誰かが「ねえ、CSSを使用してスタイルを設定することはできません。JSを使用してください!!!」それらをすぐに疑います。CSSは今日非常に柔軟です

例:: http://jsfiddle.net/uWrLE/1/

この例では、最初の7人の子供は青で、次に8人が赤です...

純粋なCSSで（scssを使用して）実行する予定であるが、同じ親クラス内に異なる要素/クラスがある場合は、このバージョンを使用できます。

  &:first-of-type:nth-last-of-type(1) {
    max-width: 100%;
  }

  @for $i from 2 through 10 {
    &:first-of-type:nth-last-of-type(#{$i}),
    &:first-of-type:nth-last-of-type(#{$i}) ~ & {
      max-width: (100% / #{$i});
    }
  }

いいえ、CSSにはこのようなものはありません。ただし、JavaScriptを使用して子の数を計算し、スタイルを適用できます。