Share
Es gab Gelegenheiten, bei denen ich wünschte, ich könnte ein übergeordnetes Element mit CSS auswählen - und ich bin in dieser Angelegenheit nicht alleine. Es gibt jedoch nicht so etwas wie Elternauswahl in CSS ist es vorerst einfach nicht möglich.
In diesem Lernprogramm werden wir einige Fälle durchgehen, in denen es hilfreich sein könnte, einen CSS-Elternselektor zusammen mit einigen möglichen Problemumgehungen zu verwenden. Lass uns anfangen!
Mit CSS-Selektoren können wir Elemente anvisieren, die DOM-Baumstruktur nach unten verschieben und dabei spezifischer werden. Hier ist ein Beispiel für die Art des Selektors, den Sie in Bootstrap finden könnten. Er geht den DOM-Baum von unten nach unten nav.navbar-dark Element, um die ul, das li, dann endlich die a.nav-link.
.navbar-dark .navbar-nav .nav-item .nav-link
Ein Elternselektor würde uns die Rückreise ermöglichen oben das DOM, das auf die übergeordneten Elemente bestimmter Dinge abzielt. Zum Beispiel könnten wir das übergeordnete Ziel ansprechen .Nav-Link Elemente mit:
.nav-link :: parent
Hinweis: Bei diesem Beispiel handelt es sich um reinen Pseudo-Code. Es existiert nicht und schlägt keine bestmögliche Syntax vor!
Die Gestaltung alter Inhalte mit datierter Markup und Struktur ist eine klassische Herausforderung bei der Neugestaltung einer Website. Vor HTML5 wurde zum Beispiel normalerweise ein Bild mit einem p, div, oder manchmal mit einem Spanne zusammen mit einem verschachtelten p wird verwendet, um die Bildunterschrift einzuwickeln. Es gab keine Standardmethode, um ein Bild und eine Bildunterschrift einzuwickeln. Später verabschiedeten wir die Zahl und figcaption Elemente, wodurch unsere Dokumentenstruktur semantischer wird.
Wir möchten, dass die Bilder aus dem alten Inhalt wie oben angezeigt werden. Aber da kann es noch mehr geben div Tags in unserem Dokument, die überhaupt keine Bilder enthalten, wären die folgenden Style-Deklarationen völlig unpraktisch.
.Seiteninhalt div padding: 15px; Hintergrundfarbe: # f3f3f3; Marge: 10px 0 20px; .page-content div img marging: 0 0 10px; .page-content div .img-caption color: # 999; Schriftgröße: 12px; Text ausrichten: Mitte; Wisplay: Block;
Die Hintergrundfarbe, die Auffüllung und die Ränder werden auf alle div-Elemente im Inhalt angewendet. Wir möchten diese Stile eigentlich ausschließlich auf anwenden div Elemente, die ein Bild und eine Bildunterschrift umschließen.
Ein anderes Beispiel befasst sich mit der Aufrechterhaltung des Verhältnisses von eingebetteten Videos (wie von Youtube oder Vimeo) sowie der Videoübertragung. Heute, weitgehend dank der Ermittlungsarbeit von Dave Rupert und seinen Kumpels, ist es allgemein anerkannt, dass der beste Ansatz die Anwendung ist Polsterauflage oder Polsterboden zum übergeordneten Element.
Code-Snippet aus CSS-Tricks: Video mit fließender BreiteIn einer realen Welt wissen wir jedoch möglicherweise nicht, welches Element das Video enthält. Wir finden möglicherweise eingebettetes Video in einem eingebetteten Video div oder ein p ohne identifizierbaren Klassennamen, wodurch es schwierig ist, das richtige Element auszuwählen, auf das die Stile angewendet werden sollen.
Daher ist es auch unpraktisch, die Stile wie folgt zu deklarieren, da sie sich auf alle Divs innerhalb der .Seiteninhalt einschließlich solcher, die kein eingebettetes Video enthalten.
.Seiteninhalt Breite: 560px; Rand rechts: auto; Rand links: auto; Rand oben: 30px; .page-content div position: relativ; Polsterboden: 56,25%; .page-content div iframe position: absolut; oben: 0; Breite: 100%; Höhe: 100%;
Wie schön wäre es, das übergeordnete Element des Videos direkt auszuwählen!
In diesem Beispiel haben wir ein Formular mit mehreren Eingaben. Wenn wir uns auf eine der Eingaben konzentrieren, erhält sie eine markantere Rahmenfarbe, die die Position des Benutzers innerhalb des Formulars hervorhebt.
Manchmal kann es auch vorkommen, dass nicht nur die Rahmenfarbe, sondern das die Eingabe umgebende Element hervorgehoben wird, wodurch die Eingabe noch deutlicher wird:
Eingabeformular Fokus.Das übergeordnete Element kann a sein div oder ein p. Wie können wir also das übergeordnete Element anhand bestimmter Zustände seiner Nachkommen richtig auswählen?
Wie wir bereits besprochen haben, gibt es keine Elternauswahl, Daher ist die Auswahl eines übergeordneten Elements nicht möglich. Wir könnten versucht sein, das Problem zu umgehen, indem wir das Design komplett überdenken, sodass die Auswahl des übergeordneten Elements vermieden wird. Wenn das nicht möglich ist, gibt es hier einige mögliche Ansätze.
Accentsconagua
:hat() Wähler Das :hat Selector wird offiziell als relationale Pseudo-Klasse bezeichnet. Es ordnet Elemente basierend auf ihren Nachkommen zu, die zwischen den Klammern definiert sind.
Im folgenden Beispiel gilt a Hintergrundfarbe zu irgendeinem div eine Bildunterschrift enthalten. Dies befasst sich scheinbar mit Fall 1.
.Seiteninhalt div: has (.img-caption) padding: 15px; Hintergrundfarbe: #ccc;
Oder wenn wir genauer sein wollen, können wir es umschreiben, damit es mit jedem übereinstimmt div tag mit dem .img-caption als die Direkte Nachkomme.
.Seiteninhalt div: has (> .img-caption) padding: 15px; Hintergrundfarbe: #ccc;
Diese Auswahl wurde für CSS Selector Level 4 entworfen, aber noch nicht von Browsern implementiert. Wir werden etwas länger warten müssen, bis dieser Wähler ans Licht kommt. Sehen Sie sich bis dahin den folgenden Videokurs mit dem Titel CSS of the Future an, um herauszufinden, wie der Selektor funktioniert:
Keine einzige CSS-Lösung kann unsere Probleme hier beheben. Sehen wir uns stattdessen an, was JavaScript für uns tun kann. In diesem Beispiel werden wir jQuery für robuste APIs, Benutzerfreundlichkeit und Browserkompatibilität verwenden. Zum Zeitpunkt des Schreibens bietet jQuery drei Methoden zur Auswahl übergeordneter Elemente.
Elternteil(); Diese Methode wählt das unmittelbare übergeordnete Element des Zielelements aus. Wir können diese Methode nutzen, um alle unsere bereits in diesem Tutorial erwähnten Anwendungsfälle zu behandeln.
Bildstruktur in älteren Inhalten.Zum Beispiel können wir verwenden Elternteil() um dem Umbruchelement der Bilder im Inhalt eine spezielle Klasse hinzuzufügen.
$ (".img-caption") .parent () .addClass ("has-img-caption"); Der obige Code wählt das unmittelbare Element, das das Bild umgibt, unabhängig vom Elementtyp, und fügt das hinzu hat-img-caption Klasse, um uns mehr Kontrolle über die Elementauswahl und -stile zu geben, wie folgt.
Bildstruktur in älteren Inhalten mit einer zusätzlichen Klasse.Eltern() Beachten Sie die Pluralform dieser Methode. Diese Methode ermöglicht es uns, die übergeordneten Elemente vom unmittelbaren bis zum Stamm des Dokuments auszuwählen, es sei denn, a Wähler wird als Argument angegeben.
$ (".img-caption") .parents () .addClass ("has-img-caption"); Im obigen Beispiel wird die Eltern() Methode wählt den ganzen Weg aus div Tag, der das Bild sofort umschließt, das nächste div, und schließlich die html, Hinzufügen der hat-img-caption Klasse für alle Elemente.
Die Klasse has-img-caption, die mit der parent () -Methode angewendet wird.Ein solcher Overkill ist überflüssig. Das einzige Element, das die Klasse wahrscheinlich hinzufügen muss, ist in diesem Fall das unmittelbare div Element. Daher übergeben wir es im Methodenargument.
$ (".img-caption") .parents ("div") .addClass ("has-img-caption"); Hier die Eltern() Diese Methode durchläuft den Ahnenbaum des Bildes und wählt eine beliebige aus div gefunden und das geben hat Bildtitel Klasse.
Wenn das immer noch überheblich ist, können Sie die Auswahl durch Angabe des Index auf ein einzelnes Element eingrenzen. Im folgenden Beispiel wenden wir die Klasse nur auf die erste an div.
var $ parents = $ (".caption") .parents ("div"); $ parents [0] .addClass ("has-img-caption"); // wähle das erste div add füge die Klasse hinzu. elternUntil (); Diese Methode wählt die übergeordneten Elemente bis zu aber nicht inklusive das in Klammern angegebene Element.
$ (".caption") .parentsUntil (".page-content") .addClass ("has-img-caption"); In Anbetracht des obigen Codes wird das angewendet hat-img-caption Klasse für alle übergeordneten Elemente außer dem Element mit .Seiteninhalt.
In einigen Fällen, in denen Sie gazillion verschachtelte Elemente haben, verwenden Sie die elternUntil () Methode ist vorzuziehen. Es ist vergleichsweise schneller als das Eltern() Diese Methode vermeidet die Verwendung der jQuery-Selector-Engine (Sizzle), um die gesamte DOM-Struktur bis zum Dokumentstamm zu durchlaufen.
Ist es wahrscheinlich, dass wir irgendwann in der Zukunft einen CSS-Parent-Selector haben werden??
Wahrscheinlich nicht. Die Art von Elternselektor, die wir oben besprochen haben, wurde bereits mehrmals vorgeschlagen, hat jedoch aus mehreren Gründen den W3C-Entwurf nicht bestanden. Diese Gründe beziehen sich hauptsächlich auf die Browserleistung, da Browser Seiten bewerten und wiedergeben. Das nächste, was wir in Zukunft haben werden, ist der relationale Selektor, :hat().
Jedoch seit dem :hat() ist noch nicht anwendbar, JavaScript und jQuery sind derzeit der zuverlässigste Ansatz. Beachten Sie, dass DOM Traversal ein kostspieliger Vorgang ist, der die Renderleistung Ihrer Website beeinträchtigen kann. Vermeide das Benutzen Eltern() oder elternUntil () mit anderen schweren Operationen wie animieren(), einblenden() oder ausblenden().
Untersuchen Sie die HTML-Struktur nach Möglichkeit, um zu sehen, ob die Auswahl des übergeordneten Elements vollständig vermieden werden kann!
