Ich beantworte wahrscheinlich meine eigene Frage, bin aber sehr neugierig.
Ich weiß, dass CSS einzelne Kinder eines Elternteils auswählen kann, aber es gibt Unterstützung, um die Kinder eines Containers zu formatieren, wenn sein Elternteil eine bestimmte Anzahl von Kindern hat.
beispielsweise
container:children(8) {
// style the parent this way if there are 8 children
}
Ich weiß, dass es komisch klingt, aber mein Manager hat mich gebeten, es zu überprüfen. Ich habe selbst nichts gefunden, also habe ich beschlossen, mich vor Beendigung der Suche an SO zu wenden.
css
css-selectors
Brodie
quelle
quelle
Antworten:
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 in CSS3 Stile nicht auf einen übergeordneten Knoten angewendet werden können, basierend auf der Anzahl der untergeordneten Knoten . Stile können jedoch basierend auf der Anzahl der Geschwister auf die untergeordneten Knoten angewendet werden.
Ursprüngliche Antwort:
Unglaublicherweise ist dies jetzt nur noch in CSS3 möglich.
Der Trick besteht darin, das erste Kind auszuwählen, wenn es auch das n-te vom letzten Kind ist. Dies wählt effektiv basierend auf der Anzahl der Geschwister aus.
Der Verdienst für diese Technik geht an André Luís (entdeckt) und Lea Verou (verfeinert).
Liebst du nicht einfach CSS3? 😄
CodePen Beispiel:
Quellen:
quelle
:first-child:nth-last-child(1)
Sie auch verwenden können:only-child
.Nun, nicht wirklich. Es gibt einige Selektoren, die Sie etwas näher bringen können, aber in Ihrem Beispiel wahrscheinlich nicht funktionieren und nicht die beste Browserkompatibilität aufweisen.
:only-child
Dies
:only-child
ist einer der wenigen echten Zählselektoren in dem Sinne, dass er nur angewendet wird, wenn ein untergeordnetes Element des übergeordneten Elements des Elements vorhanden ist. Anhand Ihres idealisierten Beispiels verhält es sich wiechildren(1)
wahrscheinlich.:nth-child
Der
:nth-child
Selektor bringt Sie möglicherweise tatsächlich dahin, wo Sie hin möchten, je nachdem, was Sie wirklich tun möchten. Wenn Sie alle Elemente stylen möchten, wenn 8 Kinder vorhanden sind, haben Sie kein Glück. Wenn Sie jedoch Stile auf das 8. und spätere Element anwenden möchten, versuchen Sie Folgendes:Leider sind dies wahrscheinlich nicht die Lösungen, nach denen Sie suchen. Am Ende müssen Sie wahrscheinlich einige Javascript-Assistenten verwenden, um die Stile basierend auf der Anzahl anzuwenden. Selbst wenn Sie einen dieser Stile verwenden würden, müssten Sie sich die Browserkompatibilität genau ansehen, bevor Sie mit einem reinen Stil beginnen CSS-Lösung.
W3 CSS3-Spezifikation für Pseudoklassen
BEARBEITEN Ich habe Ihre Frage etwas anders gelesen - es gibt noch ein paar andere Möglichkeiten, die Eltern zu stylen , nicht die Kinder. Lassen Sie mich ein paar andere Selektoren auf Ihren Weg werfen:
:empty
und:not
Dadurch werden Elemente formatiert, die keine untergeordneten Elemente haben. Für sich genommen nicht so nützlich, aber in Verbindung mit dem
:not
Selektor können Sie nur die Elemente formatieren, die untergeordnete Elemente haben: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.
quelle
HINWEIS: Diese Lösung gibt die untergeordneten Elemente von Sätzen bestimmter Länge zurück, nicht das von Ihnen angeforderte übergeordnete Element. 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 sie nur in IE9 und höher.
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 Elementmengen mit bestimmten Längen angeben .
Entspricht beispielsweise
:nth-child(1):nth-last-child(3)
dem ersten Element in einer Menge und ist gleichzeitig das dritte Element am Ende der Menge. Dies macht zwei Dinge: garantiert, dass die Menge nur drei Elemente hat und dass wir das erste der drei haben. Um das zweite Element des Drei-Elemente-Satzes anzugeben, würden wir verwenden:nth-child(2):nth-last-child(2)
.Beispiel 1 - Wählen Sie alle Listenelemente aus, wenn set drei Elemente enthält:
Beispiel 1 Alternative von Lea Verou:
Beispiel 2 - Ziel letztes Element der Menge mit drei Listenelementen:
Beispiel 2 Alternative:
Beispiel 3 - zweites Zielelement der Menge mit vier Listenelementen:
quelle
li:nth-child(3):nth-last-child(1) { transform: rotate(120deg); } li:nth-child(2):nth-last-child(2) { transform: rotate(240deg); }
und so weiter ...Ausgehend von Matts Lösung habe ich die folgende Compass / SCSS-Implementierung verwendet.
Auf diese Weise können Sie die Anzahl der Elemente schnell erweitern.
quelle
Ja, wir können das mit dem n-ten Kind so machen
Dadurch wird das Kind der 8. Division rot. Hoffe das hilft...
Auch wenn jemand jemals sagt "Hey, er kann nicht mit CSS gestylt werden, benutze JS !!!" bezweifle sie sofort. CSS ist heutzutage äußerst flexibel
Beispiel :: http://jsfiddle.net/uWrLE/1/
Im Beispiel sind die ersten 7 Kinder blau, dann sind 8 rot ...
quelle
Wenn Sie dies in reinem CSS (mit scss) tun möchten, aber unterschiedliche Elemente / Klassen in derselben übergeordneten Klasse haben, können Sie diese Version verwenden !!
quelle
Nein, so etwas gibt es in CSS nicht. Sie können jedoch JavaScript verwenden, um die Anzahl der untergeordneten Elemente zu berechnen und Stile anzuwenden.
quelle