Um es klarzustellen, falls jemand dies über eine Suchmaschine findet: Es gibt keine Elternselektoren in CSS, nicht einmal in CSS3. Es ist jedoch ein interessantes Thema, und einige neue Diskussionen sind aufgetaucht.
Bereits 2008 schlug Shaun Inman die Syntax vor
a < img { border: none; }[Satz wurde korrigiert]: In diesem Beispiel würden a-Tags ausgewählt, aber nur, wenn sie ein img-Tag enthielten. (Nebenbemerkung: Dies wäre eine seltsame Abweichung von der typischen Syntax, bei der die tatsächlich ausgewählten Elemente auf der rechten Seite stehen; hier stünde es links).
Lesen Sie unbedingt die Kommentare zu diesem Beitrag, es ist ein äußerst interessanter Thread, der einige ziemlich gewichtige Gründe enthält, warum Elternselektoren noch nicht existieren. David Hyatt, ein Entwickler, der an der Frontlinie bei der Implementierung solcher Dinge in WebKit steht, kommentiert:
Mit Elternselektoren wird es extrem einfach, versehentlich eine dokumentweite Durchsuchung zu verursachen. Leute können und werden diesen Selektor missbrauchen. Ihn zu unterstützen bedeutet, Leuten viel Seil zu geben, an dem sie sich aufhängen können.
Jonathan Snook brachte dieses Thema wieder auf und gibt uns viele großartige Hintergrundinformationen darüber, wie CSS-Rendering funktioniert. Wir haben alle schon gehört, dass der universelle Selektor der ineffizienteste CSS-Selektor ist. Jonathan sagt, wenn es einen Elternselektor gäbe, wäre das leicht der neue Spitzenreiter bei den ineffizienten Selektoren. Das Argument ist, dass beim dynamischen Hinzufügen und Entfernen von Elementen von der Seite das gesamte Dokument neu gerendert werden müsste (erhebliche Bedenken hinsichtlich der Speichernutzung). Jonathan ist jedoch immer noch optimistisch
Was ich beschrieben habe, ist technisch nicht unmöglich. Tatsächlich im Gegenteil. Es bedeutet nur, dass wir uns mit den Leistungsimplikationen der Verwendung eines solchen Features auseinandersetzen müssten.
Remy Sharp macht auch mit bei dem Spaß und schlägt diese Syntax vor
a img:parent { background: none; }Der Hauptunterschied besteht darin, dass die :parent-Syntax nur ein einzelnes Element auswerten würde, das parentNode, das für jedes Element im DOM verfügbar ist. Dies wäre ähnlich wie die Einschränkung des :has-Selectors auf die Auswertung von Kindern anstatt aller Nachfahren.
Bisher sind sich alle einig
- Es gibt erhebliche Leistungsprobleme
- Diese Bedenken können als abzuwägende Kompromisse betrachtet werden, nicht als Showstopper.
- Wünschenswert!
Schöner Artikel, persönlich benötige ich keine Elternselektoren. Und wenn sie Leistungsprobleme mit sich bringen, denke ich, dass sie nicht in den Standard aufgenommen werden sollten.
Aber hey, wenn Sie, Chris, der CSS-Guru, ein Szenario finden können, in dem Elternselektoren die Dinge so viel einfacher machen. Ich würde es gerne hören.
Ich stimme zu, ich würde gerne ein Szenario sehen, in dem ein Elternselektor entscheidend wäre, Dinge einfacher machen würde oder effizienter wäre (wenn die Leistungsprobleme nicht bestünden).
Rick –
Hier ist eine Situation, auf die ich gestern gestoßen bin – ich habe eine Navigation gestylt, die automatisch von einem CMS generiert wird (ich kann also keine Klasse oder ID zum Markup hinzufügen UND die Reihenfolge der Navigationslinks könnte sich im Laufe der Zeit ändern, sodass ich :nth-Selektoren nicht verwenden konnte).
Ich wollte, dass das den Link enthaltende
lifür die URL http://foo.com ein wenig anders aussieht. Es wäre großartig gewesen, etwas wieli < a[href=http://foo.com] {background:red}verwenden zu können.Das ist tatsächlich ein schönes Beispiel, wo der Elternselektor verwendet werden könnte. Aber wollen Sie das 'a' oder das 'li' stylen? Denn wenn Sie das 'a' stylen wollen, können Sie einfach die Tatsache ignorieren, dass es in einem 'li' enthalten ist und tun.
a[href=http://foo.com]{//styling}Es sei denn, Sie möchten nur das 'a' an einer bestimmten Stelle und nicht anderswo auf der Website stylen. Dann sollten Sie es mit einer Bedingung einschränken wie
#header a[href=http://foo.com]{//styling}Beim Stylen von Hover wäre es schön, wenn die Elternkomponente reagiert, wenn das Kind ausgewählt wird.
Ein guter Grund für Elternselektoren ist das Stylen von Radio-Buttons oder Checkboxen. Firefox mag aus irgendeinem Grund keine Hintergründe, die auf einem Input-Element wie Radio-Buttons und Checkboxen gesetzt werden. Ich habe ein Projekt, bei dem ich Radio-Buttons verwende, die wie Ja/Nein-Buttons aussehen (gut für die Zugänglichkeit) und ein :checked auf dem Input haben, das einen Rahmen um den Button legt.
Das funktioniert jedoch nicht in FF. Ich sehe nur den eigentlichen Radio-Button oder die Checkbox. Um das Input-Element zu stylen, müsste ich es wirklich in einen Div-Tag einfügen und diesen stylen, aber dann tritt das Problem auf, dass der Rahmen um ihn herum erscheint, wenn er aktiviert ist, daher: ein guter Grund für einen Elternselektor!
Ich habe "!" als CSS4-Entwurf gesehen, also wäre es in meinem Fall schön, dies tun zu können
Div! > input[type=radio]:checked { border: 2px solid #000; }Der Div würde den Rahmen erhalten, wenn das Input-Element aktiviert ist.
Danke für den Tipp, nützlich.
Ich sehe keinen wirklichen Nutzen darin.
Ist
a < imgunda > imgnicht dasselbe?Ich schätze, Chris hat sich irgendwie verschrieben.
Mit der vorgeschlagenen Syntax würde "a < img" die "A's" auswählen, die einen "IMG" Nachfahren haben.
Ein besserer Weg, es auszudrücken, wäre "parent-selector that-has descendant-selector", wobei Sie "that-has" durch "<" ersetzen.
Die Art und Weise, wie Shaun es beschrieben hat, ist tatsächlich das Gegenteil von dem, was ich gesagt habe, aber ich könnte es mir auch andersherum vorstellen. Ich persönlich würde es bevorzugen, wie ich es beschrieben habe, das heißt, der Teil des Selektors, der am weitesten rechts steht, wäre immer noch das tatsächlich ausgewählte Element und nicht der am weitesten links stehende.
Denken Sie an ein mehrstufiges Dropdown-Menü. Einige der LI's enthalten auch eine weitere UL, aber einige nicht. Es wäre cool, nur diejenigen anzusprechen, die Eltern einer weiteren Ebene sind, damit Sie zum Beispiel einen Pfeilindikator anwenden könnten, der angibt, dass dieses Listenelement ein Untermenü enthält. Derzeit gibt es keinen Selektor, den Sie schreiben können, um ein LI anzusprechen, das eine UL enthält.
Sie könnten einfach eine Klasse zu den übergeordneten LIs auf der Serverseite hinzufügen, um dies zu erreichen.
Das könnten Sie tun. Sie könnten auch den Server alles analysieren lassen, wie es aussehen soll, und dann Inline-Styles auf jedes Element nach Bedarf anwenden. Nur weil es eine Umgehung gibt, heißt das nicht, dass CSS kastriert bleiben sollte.
@Phil: Aus Neugier, wie würden Sie das erreichen? Wie geben Sie übergeordneten LIs eine Klasse, da sie ein untergeordnetes UL haben, mit serverseitigen Methoden? Dies mit jQuery zu tun ist sehr einfach, obwohl ich nicht wusste, dass Sie dies serverseitig tun können.
Gibt es eine PHP-Syntax für "hasClass"?
@Amit, nein, nicht in diesem Sinne. Wenn Sie zum Beispiel ein Menü mit mehreren Ebenen ausgeben, indem Sie eine Schleife oder eine rekursive Funktion ausführen, dann wissen Sie, dass das übergeordnete LI Kinder hat und ihm eine Klasse hinzufügen können.
@chris, ich habe zu keinem Zeitpunkt vorgeschlagen, Inline-Stile hinzuzufügen. Warum und wie würden Sie analysieren, wie etwas auf dem Server aussehen soll? Ich sehe es nicht als Umgehung, es ist eine Lösung für das von Ihnen genannte Szenario.
Der
a < imgSelektor besagt eigentlich "wähle a aus, wenn es ein Kind-img hat". Elternselektoren wären in verschiedenen Bereichen sehr hilfreich – z.B.div < input.error(dadurch müssen Sie Ihre Fehlermeldendefinition nicht bis zu einem Div oder einem höheren übergeordneten Element wiederholen, wenn Sie Validierungsfehler anzeigen möchten)a < img { border: none; }In diesem Beispiel würden img-Tags ausgewählt, aber nur, wenn sie ein Kind eines a-Tags wären.
Im Gegensatz zu dem, was Sie sagten, würde der (vorgeschlagene) Code oben einen a-Tag auswählen, aber nur, wenn er der Eltern eines img-Tags wäre. Was Sie vorgeschlagen haben, wird bereits abgedeckt durch
a img { ... }Ich denke…
Nein, das ist nicht so. Denn (meistens (ältere) Versionen von Internet Explorer) wenden standardmäßig Stile auf das <a>-Element an, nämlich einen Rahmen für Bilder und eine Unterstreichung für Text. Sie müssen das a-Element ansprechen.
Aber nehmen wir an, Sie möchten eine schöne gepunktete Linie unter Ihren "normalen" Links haben, das können Sie heutzutage nicht einfach tun, aber mit Elternselektoren
Toller Beitrag Chris, danke für den Tipp!
Denken Sie daran, dass es sich nicht wirklich um einen "Tipp" handelt, dies existiert noch nicht, also rennen Sie nicht los und versuchen Sie, es zu benutzen!
Es war in CSS3, wurde aber entfernt: http://www.w3.org/TR/css3-selectors/#content-selectors
(a:contains(img))
Ich bin mir nicht sicher, aber ich glaube, :contains war ein Inhaltsselektor, der tatsächlich den Text im Knoten las und basierend darauf auswählte. Sie könnten also zum Beispiel einen bestimmten Absatz hervorheben, der ein bestimmtes Wort enthielt…
Ich denke, Elternselektoren wären manchmal praktisch, aber in den meisten Fällen sollten Sie etwas Effizienteres verwenden können.
Ich verwende selten Elternselektoren mit JavaScript (jQuery macht meiner Meinung nach einen ziemlich guten Job), aber ich versuche, es zu vermeiden.
Ich sehe, worauf Sie hinauswollen, Chris, und ich mag die Idee. Jetzt müssten sie sie nur noch in CSS4 oder so specifizieren.
Ich kann mir vorstellen, dass ein Elternselektor nützlich wäre, da man zum Beispiel die Ränder oder die Farbe eines h1 ändern könnte, wenn es von einem bestimmten Element gefolgt wird.
Vielleicht kann dies unter einer "CSS-Wunschliste" für zukünftige Features aufgeführt werden – obwohl die zusätzliche Komplikation der Spezifität besteht, wenn es widersprüchliche Regeln gibt.
Nun, Elternselektoren könnten nützlich sein, aber sie müssen auch einige Pseudoklassen unterstützen.
Nehmen wir zum Beispiel an, Sie haben Ihr Menü so aufgebaut:
div > ul#menu > li*3 > aund Sie möchten, dass der Div oder das Li den Hintergrund bei a:hover oder a:focus ändert. Mit Elternselektoren könnten Sie etwas tun wie
li < a:hover, li <a:focus {background:red;}Heute machen Sie das mit JavaScript oder indem Sie den Hover auf das Li-Element anwenden.
Ich stimme zu, dass wir damit ernsthafte Leistungsprobleme haben werden, wie von Jonathan erwähnt. Vielleicht könnten die Browser dies mit internem JavaScript implementieren, damit es die Leistung nicht beeinträchtigt, aber es wäre nicht genau ein CSS-Parser.
Es macht mir nichts aus, es nicht zu haben... aber wie gesagt... es könnte nützlich sein..
großartig
Es ist besser als die Verwendung von javascript getParent()
Könnte es mehrmals verwendet werden, z.B. li:parent:parent?
Meiner Meinung nach ja.
Ob die Syntax "li < ul", "ul < li" oder "li:parent" wäre, ich denke, es sollte immer möglich sein, dies mehrmals zu tun, in welchem Fall der "<" flexibler ist.
Natürlich, falls Sie denken, dass die "<"-Syntax die Kenntnis des Element-Tag-Namens erfordert, während :parent dies nicht tut, liegen Sie falsch. Denn wir könnten auch "*" verwenden
"* < tag" und "tag < *"
Ja, wir verpassen wahrscheinlich immer noch interessante Dinge wie diese, da verschiedene Möglichkeiten vorgeschlagen wurden.
Ähm ja, in den seltenen Fällen, in denen Sie dies benötigen, fügen Sie einfach ein wenig JS hinzu
z.B. http://pastie.org/849838
Es könnte reine persönliche Präferenz sein, aber ich denke, die folgende Syntax wäre sinnvoller, besonders für kompliziertere Selektoren
img < aanstelle von
a < imgWarum? Weil in jedem anderen CSS-Selektor das letzte Element beschreibt, was gestylt wird. In diesem Fall wollen wir das 'a' stylen, wenn es ein 'img'-Kind hat, also macht es mehr Sinn, es ans Ende zu setzen (wieder, wahrscheinlich persönliche Präferenz).
Dies könnte bei tieferen Selektoren sehr kompliziert werden, aber es gefällt mir. Ich erinnere mich, dass ich mir das bei einem früheren Projekt gewünscht habe.
Dies hat potenziell den Vorteil, Dinge wie Pseudoklassen zu verdeutlichen
a:hover < img scheint anzugeben, dass sich der Stil des img ändert, wenn das Kind 'a' gehovert wird, mehr als img < a:hover
Ich stimme zu, "img < a", um Ankereltern von Bildern auszuwählen, ergibt für mich ebenfalls mehr Sinn.
Ich bin nicht der Erste, der das sagt, aber ich glaube, im ersten Beispiel meintest du "nur wenn sie Eltern eines
a-Tags wären" ... oder nicht? Du hast mich eine Weile wirklich verwirrt :)Weißt du was, das habe ich tatsächlich vermasselt. Ich habe es jetzt behoben.
Ähm... mein Englisch ist nicht so gut, aber ich stimme Ivan zu: Das Beispiel und die Erklärung passen nicht zum Thema des Artikels (Sie haben wahrscheinlich einen Tippfehler gemacht).
Ich beziehe mich auf
a < img { border: none; }und
„In diesem Beispiel würden img-Tags ausgewählt, aber nur, wenn sie ein Kind eines a-Tags wären.“
weil auch
a img { border:none }wählt img-Tags nur aus, wenn sie ein Kind eines a-Tags wären.
stattdessen wäre ein besseres Beispiel
ul < li { padding-left:0px; }was den linken Abstand von allen li-Tags entfernt, die eine weitere UL-Ebene enthalten
also in einem mehrstufigen Menü, alle Elemente, die Untermenüs haben.
ul li:hover a { background-color: #000000; }ul < li:hover { background-color: #cc0000; }Das Hervorheben eines Kindlinks beim Hovern ist in Ordnung, aber das Hervorheben des Hintergrunds einer ungeordneten Liste sollte auch möglich sein, wenn man mit einem Kindelement interagiert, wie z.B. einem Hover.
Wir alle erinnern uns, als das Stylen von Tabellen und Eingabeelementen mit CSS begrenzt war ... Ich bin sicher, es gab gute Gründe, auch dies abzulehnen, aber das bedeutete nicht, dass wir es für immer hinnehmen mussten ... also haben wir es nicht getan.
Elternselektoren werden wahrscheinlich nicht anders sein.
Gut, dass wir jQuery haben, um den ":has"-Selektor zu simulieren, aber es ist traurig, entweder den Server oder JavaScript für etwas verwenden zu müssen, das in echtem CSS einfach wäre.
Nur weil Leute etwas missbrauchen können, heißt das nicht, dass dieser Selektor ungültig ist: Leute sind mehr als fähig, die bestehenden bereits zu missbrauchen.
Das Simulieren des Elternselektors mit serverseitigem Skript oder JavaScript fühlt sich genauso an, als ob man JavaScript verwenden müsste, um eine Klasse hinzuzufügen, um den Hover-Selektor in IE6 zu simulieren :(
Darüber hinaus gibt es bereits dokumentweite Selektoren, die missbraucht werden: Wie viele Websites verwenden zum Beispiel "*"? Und es hat einen viel größeren Geltungsbereich als ein Elternselektor.
Abgesehen von :has hat jQuery auch .parent(). Beide haben ihre guten und schlechten Zeiten.
„In diesem Beispiel würden img-Tags ausgewählt, aber nur, wenn sie ein Kind eines a-Tags wären.“
Ich glaube, es würde a-Tags auswählen, nur wenn sie Eltern eines img-Tags wären..
Oh, Sie haben das schon behoben :)
Aus Erfahrung glaube ich nicht, dass ein Designer einen Elternselektor benötigt, tatsächlich glaube ich, dass es frustrierend wäre, wenn er eingeführt würde. Ähnlich wie bei Reset-Style-Sheets verwende ich diese nicht und muss sie nicht verwenden, weil ich verstehe, wie Browser funktionieren und entsprechend kompensieren.
Was ist mit der Kennzeichnung des Elements, das Sie in einer Anweisung stylen möchten, mit einem Ausrufezeichen?
a > imgwählt Bilder aus, die von Links abstammena > img!wäre dasselbe.a! > imghingegen wären die Links, von denen diese Bilder abstammen.Ich erkannte, nachdem ich darüber nachgedacht hatte, dass dies *sehr* ähnlich ist. img wird genauso viele Dinge wie a > img übereinstimmen, es wird nur eine Ebene über dem Treffer gestylt. Das macht es klarer, das Lesen und Schreiben dieser Stile wird viel einfacher.
Praktisch gesehen, indem es kein Selektor auf derselben Ebene wie > oder + oder was auch immer ist, machen wir es möglich, den vollen Umfang bestehender Selektoren für unsere Qualifizierer zu nutzen.
In "qualified selectors" ist nicht ganz klar, was "<" tut. Stimmt div < img mit dem div in überein? Ich glaube, er sagt es, aber wenn ja, ist es möglich, einen Selektor mit einer Anweisung zu qualifizieren, die *nicht* mit einem Nachfahrenselektor beginnt? Wenn nicht, wie würde man einen Selektor schreiben, der dies tut?
Verwenden von ".". Selbst wenn es machbar wäre, ist div img einfach furchtbar.
Ausrufezeichen sind eindeutig von den "Beziehungs"-Selektoren wie >, + oder anderen getrennt, und sie sollten sich an "unabhängige" Selektoren (Klassen-, ID-, Typ- und Pseudoselektoren) anhängen, um ihre Verwendung zu verdeutlichen
blockquote! imgblockquote! > imgblockquote! + imgdiv! > :checkedDieser hier gefällt mir, ich dachte an das "Umkreisen" des ausgewählten Elements mit Klammern.
Das ist eine großartige Idee! Ich bin mir nicht sicher, welches Zeichen am besten geeignet ist, aber dies mildert viele der Bedenken, dass das letzte Element nicht das zu stylende Element repräsentiert, und vermeidet auch die Verwirrung mit der umgekehrten Markierung, die ich zuvor erwähnt habe. Ich stimme für $ statt ! da das Dollarzeichen wie ein S für "style this element" aussieht.
div > a$ > imgSo wenige Worte und so viel gesagt. Toller Beitrag, Chris.
Ich würde dieses Konzept lieben, wenn es kein Leistungsproblem wäre.
So oft möchte ich einen Link stylen, der nur ein Bild enthält, und das Hinzufügen einer Klasse nervt.
Es wäre großartig, dies für diesen Fall zu verwenden, aber ich denke, die Syntax wäre
img < a vs. a img, was ein Bild innerhalb eines 'a' ist, ich willimg < a, ein 'a', das ein Bild umschließt.Ich denke, es ist am besten, das ausgewählte Element rechts zu belassen, aus Gründen der Konsistenz.
img:parent(figure)würde alle übergeordneten Figurenelemente des img abgleichen.img:nth-parent(2)würde den Großelternteil des img auswählen.img:parentwürde alle Vorfahren auswählen.img:nth-parent(1):filter(figure)würde das Elternteil auswählen, nur wenn es ein Figurenelement ist.zum Beispiel
/*
div.gallery5*{
figure[tabindex=$]img[src][alt]figcaption"caption"
}
*/
figure:focus:nth-parent(1):filter(.gallery) > figure:first-child {Stilbildung...
}
Dieser Selektor würde das erste Geschwisterelement in chronologischer Reihenfolge auswählen (die erste Figur im .gallery)
Ich mag diese Idee.
Ich hatte in der Vergangenheit Fälle, in denen ich Links im Allgemeinen mit einer Hintergrundfarbe beim Hovern stylen wollte, aber wenn ich das für einen Link mit einem Bild tue, erhalte ich Hintergrundfarbstreifen (vermutlich mit Zeilenhöhe), die im Auffüllbereich von Links mit Bildern angezeigt werden. Die Möglichkeit, Links mit Bildern auszuwählen und sie anders zu stylen, wäre praktisch gewesen.
Hallo Leute,
dieser Elternselektor könnte nützlich sein, aber wäre er nicht irgendwie gegen die Natur von CSS? Ich meine, das C in CSS steht für "Cascading" (Kaskade) und die Selektoren wählen absteigend die DOM-Elemente aus, nicht rückwärts. Dieser lachsähnliche Selektor ist sehr faszinierend und ich bin sehr neugierig, wie er sich entwickeln wird!
Entschuldigung, Paolo, aber die "Kaskade" bezieht sich auf die Reihenfolge, in der die Stilregeln angewendet werden (von weniger spezifischen zu spezifischeren Regeln) – nicht auf die Anordnung der Elemente im DOM-Baum.
Genauer gesagt, bezieht es sich auf die Reihenfolge, in der Regeln aus verschiedenen Quellen (z. B. Browser-integrierte Regeln, Autoren- und Benutzer-Style-Sheet-Regeln, Inline-Regeln usw.) aufgelöst und auf Elemente im DOM angewendet werden. Siehe: http://www.w3.org/TR/CSS2/cascade.html#cascade.
Toller Artikel ... aber ich persönlich habe noch nie einen Parent-Tag verwendet ...
Was interessant ist, ist, dass es Leute gibt, die glauben, nur weil sie keine Instanz gesehen haben, in der sie es selbst benötigt hätten, dann sollte es nicht in Betracht gezogen werden. Wenn es eine unterstützte CSS-Option gibt, warum sollten wir diese aus unserer Trickkiste ausschließen, nur weil es eine Lösung gibt, die mit serverseitigem oder clientseitigem Scripting erreicht werden kann?
Ich bin wahrscheinlich ein- oder zweimal in diesem Jahr auf diesen Bedarf gestoßen und habe einfach akzeptiert, dass es noch ein paar Jahre lang keine Option sein könnte.
Ich bin kein CSS-Experte, aber ":contains" hätte der beste Kandidat für diese Art von Funktionalität sein können. Nur wenn anstatt Inhalt zu nehmen, er einen gültigen CSS-Selektor nimmt, würde er das Problem lösen.
@Paul Walker – Ich mag Ihre Idee sehr, sie ist viel sauberer als ":contains". Aber nur um das gleiche Muster wie CSS beizubehalten, können wir es vielleicht etwas modifizieren:
div > a:$ > img— (oder was auch immer anstelle von $ steht)Man könnte sich von jQuery inspirieren lassen und verwenden
a:has(img) {/* wählt einen aus, wenn ein
}
a:has(> img) {/* wählt einen aus, wenn ein
}
das ist es, was
a img{}tut…
Danke, sehr nützlich in der Tat
Genau wie dieses kaputte Formular, das ich gerade benutze. Alle Argumente wie "aber Sie können die Stile mit jQuery machen" untergraben also völlig den Zweck, CSS für die Darstellung und Javascript für das Verhalten zu verwenden. Mit Javascript stylen? Warum dann überhaupt CSS verwenden? Ich könnte auch Markup verwenden, um meine Seiten zu stylen...
*mehr Off-Topic: Ähnlich fand ich, dass der Inhalt, der den Zweck der leeren Formularfelder in diesem Formular oben erklärte, vollständig fehlte, bis ich zu Javascript-aktiviertem Browser wechselte. Hm. Verhalten erforderlich, um grundlegende Bedeutung und Inhalt anzuzeigen? Vielleicht haben wir die Trennung der Belange schon vor einiger Zeit aufgegeben und ich habe das Memo verpasst.
*zurück zum Thema: Abgesehen von Leistungsproblemen, es macht für mich durchaus Sinn, dass die deklarative Sprache, die die Seite stylt, nach oben im DOM wandern kann, anstatt nur nach unten. Andererseits bin ich böse und hätte auch nichts gegen einige Regexen. Und ein Pony zu Weihnachten.
@Stomme – Ich nehme an, Sie beziehen sich auf @Jenna, wenn Sie über das Stylen mit jQuery und so sprechen. Sie meinte die Verwendung von jQuery-ähnlicher Syntax in CSS und nicht die Verwendung von jQuery zum Stylen von Seiten. ":has" ist ein Pseudoselektor in jQuery, also impliziert sie nur, dass wir einen ähnlichen Pseudoselektor nativ in CSS haben könnten.
@manu nicht speziell sie; es gab mehrere Kommentare zu "nun, das kann ich einfach in jQuery machen" (oder sogar nur Javascript, was man tatsächlich tun muss, WENN man Stile basierend auf dem Elternteil bestimmen MUSS... : (
Ich habe mehrere Erwähnungen von :has gesehen und vielleicht sagten sie alle, dass sie diese Art von Syntax in CSS wünschen würden, während ich sie falsch verstanden habe, als ob sie sie jetzt zum Stylen verwenden würden.
Ich würde es tatsächlich vorziehen, kein Scripting für Stile zu verwenden, aber wenn es nur durch Rückwärtswandern im DOM gemacht werden kann... versagt CSS. : (
Ausgezeichneter Artikel, und wir verwenden den Parent-Tag selten wegen der Leistung. LT
Cooler Tipp... Werde ich in meinem aktuellen Projekt verwenden.... Thanx
In meinem aktuellen Job sind wir dabei, ein neues CMS auszuwählen, das unser selbst entwickeltes und alterndes (8-9 Jahre) CMS ersetzen soll. Ich hatte keinen Einfluss auf das Design oder die Architektur des CMS, da es vor meiner Zeit war, aber ich bin gezwungen, es zu verwenden, bis wir eine bessere Lösung haben.
Das Problem ist, dass wir in unserer aktuellen Lösung viele, viele, viele verschachtelte Tabellen, falsch verschachtelte Tabellen und verschiedene Interpretationen davon haben, wo oder wie eine ID oder Klasse eingefügt werden soll und auf welches Element.
Die Ausgabe dieses Dings ist schrecklich, und der Versuch, ein Element zu gestalten, kann dazu führen, dass ein anderes kaputt geht. Ein besonderer Fall ist, wenn ich mehrere TDs auf einer Seite ohne Body-ID habe und eine Haupttabellen-ID, die mit anderen dynamisch erstellten Seiten geteilt wird. Da ich meinen eigenen Selektoren zu Elementen innerhalb der eventuellen TDs hinzufügen kann, habe ich die Möglichkeit, gegen diese Selektoren zu programmieren.
Kürzlich musste ich einige ernsthafte Ninjutsu anwenden, um einige der Governance-Seiten zu gestalten, und die einzige Lösung, die Sinn ergab, war die Verwendung einer Form der Elternauswahl. Ich griff auf eine JavaScript-Lösung zurück, die es mir erlaubte, die Elternelemente nach Belieben anzusprechen. Es war eine absolut hässliche Lösung, aber angesichts der Realität der Situation war sie notwendig.
Die von mir verwendete Methode finden Sie hier: jQuery Dynamic API Browser
Navigieren Sie zu Selectors | Hierarchy | descendant(ancestor, descendant), um ein Beispiel zu sehen.
Grundsätzlich ist die Syntax wie folgt
$(„#html_element_ID“).parent.css(„attribut“, „stil“);
Dies zielt auf das spezifische Elternteil des genannten Elements und injiziert den gewünschten Stil hinein. Es ist unordentlich und eine Qual, aber manchmal hat man nicht den Luxus, es serverseitig zu tun oder einen semantisch sinnvollen Weg zu wählen.
Ich denke, Elterselektoren würden etwas Flexibilität für diejenigen ermöglichen, die ältere Systeme unterstützen müssen. Bis dies existiert, sind Lösungen wie die oben genannte das, worauf wir zurückgreifen müssen, um dies zu kompensieren.
Meine 2 Cent
Die neue Slick.js Selektor-Engine unterstützt umgekehrte Kombinatoren, einschließlich sowohl eines getParent als auch eines getDirectParent Kombinators. Sie unterstützt auch viele zusätzliche Kombinatoren wie getPreviousSiblings.
Download: http://mootools.net/core/826c8f047c6ae21b10342f3112de2cbf
GitHub: http://github.com/mootools/slick
Wiki: http://github.com/mootools/slick/wiki/Reversed-Combinators
Ich kann mir nur einen Fall vorstellen, in dem ein Elterselektor nützlich wäre – und nur, weil ich gerade ein Problem gefunden habe, das ich bisher nicht anders lösen kann. Ich habe meine Website kürzlich auf blogengine.net umgestellt. Ich habe meinen Website-Stil erstellt, indem ich einen der voreingestellten Stile modifiziert habe. Darin gab es eine Stildefinition, um externen Hyperlinks ein kleines Symbol hinzuzufügen. Das vergesse ich immer & ich mag es – also habe ich es beibehalten.
Das Problem ist, dass ich in einigen meiner Beiträge Bilder habe, die auf eine externe Adresse verlinken. Diese Bilder sind fast immer gefloatet. Was ich also bekomme, ist ein losgelöstes Symbol, das einen externen Hyperlink anzeigt. Zum Beispiel siehe: http://www.mattlindley.info/post/2010/07/02/Hot-Damn!.aspx
Wenn ich einen Elterselektor hätte, könnte ich sagen "wähle externe Hyperlinks, die ein Kind haben, das ein Bild ist" und das Symbol von diesen Elementen entfernen.
So wie es jetzt ist, bleibe ich mit einer ungeschickten Lösung zurück, nämlich etwas wie ein "rel"-Attribut zu diesen speziellen Links hinzuzufügen, das ich dann angeben kann, um die Symbole zu entfernen.
Es ist großartig und sollte in der neuen Version von CSS implementiert werden. Danke Chris
Hallo.. Chris Coyier
Ich versuche diesen Code, aber er funktioniert nicht
style
ul < li { padding-left:0px; }html
Bitte helfen Sie mir.. vielen Dank im Voraus.
funktioniert nicht
@Arthur Lawry
Sehr clever, das ausgewählte Element an letzter Stelle zu platzieren.. und sich an die Kaskadierungsregel von CSS zu halten, Daumen hoch dafür.
Aber Ihre Beispiele haben mich verwirrt. Keine Beleidigung, aber wie kann ein "IMG"-Element ein "A"-Element als Kind haben???
Wird es so sein
[img src="foo.jpg" /] [a href="#"]mylink[/a] [ /img]
Ist das nicht lustig? =D
Eine weitere Lösung ist die Kombination von Mutation Observer JavaScript mit dem CSS rel Selektor, um ein "Vorausschauen" zu ermöglichen.
Wenn sich also ein Element im DOM ändert, wird einfach der Selektor dieses Elements (mit ID und Klassen und möglichen Events wie Hover) in einem Attribut des gemeinsamen Elternteils aufgezeichnet.
Um ein Kind-Element mit einem Großcousin der Klasse .clicked auszuwählen, würde die Syntax etwa so aussehen
parent[contains*="grandchild.clicked"] othergrandchild { … }
Ich habe hier ein Beispiel gegeben
http://codepen.io/iautomation/pen/itJmz