Ich versuche, ein Klassenelement (das mehr als einmal im DOM erscheint) anhand seines Indexes oder seiner Iteration anzusteuern, indem ich ausschließlich CSS verwende.
Ich kenne verschiedene Möglichkeiten, dies zu erreichen: Ich könnte das / die Element (e) in ein Array werfen und einen bestimmten Index dieses Elements (Javascript) abrufen. Ich könnte das Element, das ich versuchen möchte, mit einer #ID kennzeichnen. Ich könnte das Zielelement verfeinern, indem ich ein Attribut ( .element[href="link"] ) spezifiziere. Die Pseudoklasse :first-child und :last-child zielt nur auf die Kinder dieses (Eltern-) Elements ab (Duh!).
Beispiel: Ich habe ein .class 5 Mal innerhalb meines DOMs angezeigt und möchte die CSS-Eigenschaften der dritten Iteration dieses .class -Elements beeinflussen.
Ich wünschte, es gäbe eine Pseudo-Klasse von .element:index-3. Es gibt wahrscheinlich etwas da draußen, das Sie genau das tun können.
Wenn ich Sie richtig verstehe, möchten Sie das Element mit dem Inhalt "Ich!" In diesem Beispiel:
%Vor% Dies sollte möglich sein In einigen Fällen (siehe unten) ist es möglich mit der Pseudoklasse :nth-of-type :
Wie ScottS in den Kommentaren angemerkt hat, ist dies nur möglich, wenn alle Klassen denselben Elementtyp haben (z. B. p ).
Ich habe ein .class 5 Mal innerhalb meines DOMs angezeigt und möchte die CSS-Eigenschaften der dritten Iteration dieses .class -Elements beeinflussen.
Ich lese das als "drittes Zielelement, das .class über das gesamte DOM verwendet", z. B .:
Jede :nth- Pseudoklassennotation stellt ein Element dar, das durch die Anzahl der Geschwister qualifiziert wird, die ein bestimmtes Kriterium erfüllen ( :nth-child(an+b) hat an+b-1 Geschwister davor usw.).
Die CSS-Spezifikation (einschließlich Selectors Level 4-Entwurf ) bietet keine Möglichkeit, Elemente nach Index zu qualifizieren außerhalb des Geschwisterkontexts (dh es können nur einzelne Knoten durchlaufen werden, nicht der gesamte DOM-Baum). Dafür gibt es einen Leistungsgrund (das DOM ist schwierig, stellen Sie sich asynchrone Inhaltsaktualisierung vor, so funktioniert das Rendering von Engines nicht); aber auch etwas wie :nth-element-ever(3) wäre ein sehr, sehr beliebiges Kriterium und wäre besser durch die Einführung einer anderen Klasse, die genau bedeutet, was es tut, vorzugsweise während der Code-Generierung .
Wenn die Elemente nicht als benachbarte Geschwister oder zumindest im selben "scope" (Containerelement) platziert werden, gibt es keine Möglichkeit für Sie, Existenz, Iteration oder gar nichts über "verwandte" Elemente herauszufinden.
Ihr bestes Foto ist entweder eine sehr hässliche Lösung, basierend auf der Annahme, dass die Elemente Geschwister sind, die wie folgt aussehen könnten: li.class: first-child + li + li {Farbe: schwarz; } um die 3. Iteration zu finden,
oder benutzen Sie einfach JS, um das Auftreten einer Instanz zu berechnen und fügen Sie sie als spezielle Klasse ein, wie "gimme-css-here".
Tags und Links javascript html css dom css-selectors