Kann CSS die Anzahl der untergeordneten Elemente eines Elements erkennen?

Ich beantworte wahrscheinlich meine eigene Frage, aber ich bin sehr neugierig.

Ich weiß, dass CSS einzelne Kinder eines Elternteils auswählen kann, aber gibt es Unterstützung, um die Kinder eines Containers zu stylen, wenn sein Elternteil eine bestimmte Anzahl von Kindern hat.

beispielsweise

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

Ich weiß, es klingt komisch, aber mein Manager hat mich gebeten, es zu überprüfen, ich habe nichts alleine gefunden, also habe ich beschlossen, mich an SO zu wenden, bevor ich die Suche beendet habe.

Klärung:

Aufgrund einer früheren Formulierung in der ursprünglichen Frage haben einige SO-Bürger Bedenken geäußert, dass diese Antwort irreführend sein könnte. Beachten Sie, dass Stile in CSS3 basierend auf der Anzahl der untergeordneten Elemente nicht auf einen übergeordneten Knoten angewendet werden können. Stile können jedoch basierend auf der Anzahl der Geschwister auf die untergeordneten Knoten angewendet werden.


Ursprüngliche Antwort:

Unglaublich, das ist jetzt rein in CSS3 möglich.

 /* 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%; } 

Der Trick besteht darin, das erste Kind auszuwählen, wenn es auch das n-te-vorletzte Kind ist. Dies wählt effektiv basierend auf der Anzahl der Geschwister aus.

Credit für diese Technik geht an André Luís (entdeckt) und Lea Verou (raffiniert).

Magst du nicht einfach CSS3? 😄

CodePen Beispiel:

Quellen:

Nein, nicht wirklich. Es gibt ein paar Selektoren, die Sie etwas näher bringen können, aber wahrscheinlich nicht in Ihrem Beispiel funktionieren und nicht die beste Browserkompatibilität haben.

:only-child

Das :only-child ist einer der wenigen echten Zählselektoren in dem Sinne, dass es nur angewendet wird, wenn es ein Kind des Elternelements des Elements gibt. Mit Ihrem idealisierten Beispiel verhält es sich wie children(1) wahrscheinlich.

:nth-child

Der :nth-child Selektor könnte Sie tatsächlich dahin bringen, wohin Sie gehen möchten, je nachdem, was Sie wirklich tun möchten. Wenn Sie alle Elemente stylen möchten, wenn es 8 Kinder gibt, haben Sie kein Glück. Wenn Sie jedoch Stile auf das 8. und spätere Element anwenden möchten, versuchen Sie Folgendes:

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

Leider sind dies wahrscheinlich nicht die Lösungen, nach denen Sie suchen. Am Ende werden Sie wahrscheinlich einige Javascript-Assistenten verwenden müssen, um die Stile basierend auf der Anzahl anzuwenden – selbst wenn Sie eine davon verwenden würden, müssten Sie sich die Browser-Kompatibilität genauer anschauen, bevor Sie mit einem reinen gehen CSS-Lösung.

W3 CSS3 Spec auf Pseudo-classn

EDIT Ich lese deine Frage ein wenig anders – es gibt ein paar andere Möglichkeiten, die Eltern zu stylen , nicht die Kinder. Lass mich ein paar andere Selektoren auf deine Art casting:

:empty und :not

Diese Stile Elemente, die keine Kinder haben. Nicht so nützlich allein, aber wenn Sie mit dem Selektor ” :not gekoppelt sind, können Sie nur die Elemente stylen, die untergeordnete Elemente haben:

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

Sie können hier nicht zählen, wie viele Kinder mit reinem CSS verfügbar sind, aber es ist ein weiterer interessanter Selektor, mit dem Sie coole Dinge tun können.

Hinweis: diese Lösung wird die unterordneten Elemente bestimmter Länge zurückgeben, nicht das übergeordnete Element, wie Sie gefragt haben. Hoffentlich ist es immer noch nützlich.

Andre Luis hat eine Methode entwickelt: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ Leider funktioniert das nur im IE9 und darüber.

Im Wesentlichen kombinieren Sie: nth-child () mit anderen Pseudoklassen, die sich mit der Position eines Elements befassen. Mit diesem Ansatz können Sie Elemente aus Mengen von Elementen mit bestimmten Längen angeben.

Zum Beispiel :nth-child(1):nth-last-child(3) stimmt mit dem ersten Element in einer Menge überein und ist gleichzeitig das dritte Element am Ende der Menge. Dies macht zwei Dinge: garantiert, dass das Set nur drei Elemente hat und dass wir das erste der drei haben. Um das zweite Element der drei Elemente festzulegen, verwenden wir :nth-child(2):nth-last-child(2) .

Beispiel 1 – Wählen Sie alle Listenelemente aus, wenn sie aus drei Elementen besteht:

 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%; } 

Beispiel 1 Alternative von Lea Verou:

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

Beispiel 2 – Ziel letztes Element des Sets mit drei Listenelementen:

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

Beispiel 2 Alternative:

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

Beispiel 3 – Ziel zweites Element des Sets mit vier Listenelementen:

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

Ausgehend von Matts Lösung habe ich die folgende Compass / SCSS-Implementierung verwendet.

 @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); } } 

Auf diese Weise können Sie die Anzahl der Elemente schnell erweitern.

Ja, wir können das mit nth-child so machen

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

Dadurch wird das 8. Kind rot. Hoffe das hilft…

Auch, wenn jemand sagt “Hey, sie können nicht mit Stil mit CSS verwendet werden, verwenden Sie JS !!!” bezweifle sie sofort. CSS ist heutzutage extrem flexibel

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

Im Beispiel sind die ersten 7 Kinder blau, dann 8 und sind rot …

Wenn Sie es in reinem CSS (mit scss) tun, aber Sie haben verschiedene Elemente / classn innerhalb derselben Elternklasse, können Sie diese Version verwenden !!

  &: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}); } } 

Nein, in CSS gibt es nichts dergleichen. Sie können jedoch JavaScript verwenden, um die Anzahl der untergeordneten Elemente zu berechnen und Stile anzuwenden.