Dies ist ein erfundenes Beispiel für eine Art von Problemen, die ich täglich habe, wenn ich ein Content-Management-System verwende, das den HTML-Code für jede Menge Webseiten erstellt, und ich brauche allgemeine Methoden, CSS entsprechend anzuwenden zu Modellen. Ich frage mich, ob es eine nicht-Javascript-Möglichkeit gibt, es zu lösen.
Angenommen, ich habe ein div der Klasse some-div , das entweder 1 oder 2 Kind div s hat. Wenn es 1 Kind div hat, sollte dieses Kind einen red Hintergrund haben; Wenn es 2 untergeordnete divs hat, sollten sie blue backgrounds haben:
Gibt es eine Möglichkeit, dies in CSS zu tun? Ein Hack, vielleicht?
Nun, ich werde höhlen. Hier ist meine Lösung
Offenbar gibt es auch den :only-child Selektor, den ich gefunden habe, indem ich in @LiorRazs Kommentar
Es hat ungefähr so viel Unterstützung wie :last-child
Wäre es wert, wenigstens nachzusehen. Hier ist ein eingebettetes Beispiel.
Sie können das div mit css pseudo FIDDLE HERE
anvisierenCSS
%Vor% Ja, das kannst du mit nth-of-type machen. Setzen Sie alle auf background-color: red , dann können Sie jedes .some-class nach dem ersten Ziel ausrichten und die Farbe div in blau überschreiben:
UPDATE FÜR ckuijjer
Wer hat gesagt: don't think this is a solution. The question is can you color the child <div>'s a red if there it's the only child and blue if there are two children.
Ja, du kannst. Hier ist wie:
%Vor% Unterm Strich ist das, wie man es macht, egal was der OP in seiner Erklärung darzustellen versuchte und ob ich oder irgendjemand sonst verstand, was er / sie eigentlich wollte, die Antwort (Fragentitel war: Is it possible to do this with only CSS? ) ist: Ja, es kann nur mit CSS gemacht werden. Brauche einfach die richtige Gleichung.
Tags und Links html css css-selectors