Das Pluszeichen ( +
) steht für das nächste Geschwister.
Gibt es ein Äquivalent für das vorherige Geschwister?
css
css-selectors
Jourkey
quelle
quelle
Antworten:
Nein, es gibt keinen Selektor für "vorherige Geschwister".
In einem verwandten Hinweis,
~
ist für allgemeine Nachfolger Geschwister (dh das Element kommt nach diesem, aber nicht unbedingt unmittelbar danach) und ist ein CSS3-Selektor.+
ist für das nächste Geschwister und ist CSS2.1.Siehe Benachbarter Geschwisterkombinator aus Selektoren Level 3 und 5.7 Benachbarte Geschwisterkombinatoren aus Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) .
quelle
Ich habe einen Weg gefunden, alle vorherigen Geschwister (im Gegensatz zu
~
) zu stylen, die je nach Bedarf funktionieren können.Angenommen, Sie haben eine Liste mit Links, und wenn Sie mit der Maus über einen Link fahren, sollten alle vorherigen rot werden. Sie können es so machen:
quelle
float:right
) neu anordnen . Es war ein Leerraumkollaps zwischen Einheiten / Wörtern und Auffüllen anstelle von Rändern erforderlich, aber ansonsten funktioniert es einwandfrei!Selectors Level 4 führt
:has()
(früher die Betreff-Anzeige!
) ein, mit der Sie ein vorheriges Geschwister auswählen können mit:… Aber zum Zeitpunkt des Schreibens ist es für die Browserunterstützung ein Stück weit entfernt.
quelle
:has()
Pseudoklasse verwenden.Berücksichtigen Sie die
order
Eigenschaft von Flex- und Rasterlayouts.Ich werde mich in den folgenden Beispielen auf Flexbox konzentrieren, aber die gleichen Konzepte gelten für Grid.
Mit der Flexbox kann ein vorheriger Geschwister-Selektor simuliert werden.
Insbesondere kann die Flex-
order
Eigenschaft Elemente auf dem Bildschirm verschieben.Hier ist ein Beispiel:
SCHRITTE
Machen Sie den
ul
einen flexiblen Behälter.Kehren Sie die Reihenfolge der Geschwister im Aufschlag um.
Verwenden Sie einen Geschwister-Selektor, um auf Element A zu zielen (
~
oder dies zu+
tun).Verwenden Sie die Flex-
order
Eigenschaft, um die Reihenfolge der Geschwister in der visuellen Anzeige wiederherzustellen.... und voilà! Ein früherer Geschwister-Selektor wird geboren (oder zumindest simuliert).
Hier ist der vollständige Code:
Aus der Flexbox-Spezifikation:
Der Anfangswert
order
für alle Flex-Elemente ist 0.Siehe auch
order
in der CSS Grid Layout-Spezifikation .Beispiele für "vorherige Geschwisterselektoren", die mit der
order
Eigenschaft flex erstellt wurden .jsFiddle
Eine Randnotiz - Zwei veraltete Überzeugungen über CSS
Flexbox erschüttert langjährige Überzeugungen über CSS.
Eine solche Überzeugung ist, dass ein früherer Geschwister-Selektor in CSS nicht möglich ist .
Zu sagen, dass dieser Glaube weit verbreitet ist, wäre eine Untertreibung. Hier finden Sie eine Auswahl verwandter Fragen zum Stapelüberlauf:
Wie oben beschrieben, ist dieser Glaube nicht ganz richtig. Ein vorheriger Geschwister-Selektor kann mithilfe der Flex-
order
Eigenschaft in CSS simuliert werden .Der
z-index
MythosEin weiterer langjähriger Glaube war, dass
z-index
nur auf positionierten Elementen funktioniert.Tatsächlich behauptet die aktuellste Version der Spezifikation - der Entwurf des W3C-Editors - immer noch, dass dies wahr ist:
In Wirklichkeit sind diese Informationen jedoch veraltet und ungenau.
Elemente, die flexible Elemente oder Rasterelemente sind, können Stapelkontexte erstellen, selbst wenn dies der Fall
position
iststatic
.Hier ist eine Demonstration der
z-index
Arbeit an nicht positionierten Flex-Elementen: https://jsfiddle.net/m0wddwxs/quelle
order
Eigenschaft ist keine Lösung, da sie ausschließlich die visuelle Reihenfolge ändern soll. Daher wird nicht die ursprüngliche semantische Reihenfolge wiederhergestellt, die Sie in HTML ändern müssen, damit diese Problemumgehung funktioniert.z-index
funktionieren wird, auch wenn „omg, gibt es keinesposition
, die Spezifikation , das Konzept der Nennungen angegeben!“ Stapel Kontext , der durch schön erklärt diesen Artikel auf MDNfloat: right
(oder mit anderen Mitteln, um die Reihenfolge umzukehren, von denenflex/order
nur geringe (geringste?) Nebenwirkungen auftreten). Zwei Geigen ausgepeitscht: Demonstration derfloat: right
Annäherung und Demonstrationdirection: rtl
Ich hatte die gleiche Frage, aber dann hatte ich einen "duh" Moment. Anstatt zu schreiben
schreiben
Offensichtlich stimmt dies mit "x" anstelle von "y" überein, aber es antwortet mit "Gibt es eine Übereinstimmung?" Frage, und einfache DOM-Durchquerung kann Sie effizienter zum richtigen Element bringen, als in Javascript zu schleifen.
Mir ist klar, dass die ursprüngliche Frage eine CSS-Frage war, daher ist diese Antwort wahrscheinlich völlig irrelevant, aber andere Javascript-Benutzer können über die Suche über die Frage stolpern, wie ich es getan habe.
quelle
y ~ x
mein Problem lösen könntey ~ x
antwortet nicht mit "Gibt es eine Übereinstimmung?" Frage, weil die beiden hier angegebenen Selektoren völlig unterschiedliche Bedeutungen haben. Es gibt keine Möglichkeit,y ~ x
jemals eine Übereinstimmung zu erzeugen, wenn beispielsweise der Teilbaum gegeben wäre<root><x/><y/></root>
. Wenn die Frage lautet "Existiert du?" dann ist der Selektor einfachy
. Wenn die Frage lautet: "Existiert y bei einem Geschwister x in einer beliebigen Position?" dann brauchst du beide Selektoren. (Obwohl ich vielleicht gerade nicht picke ...)Zwei Tricks . Grundsätzlich invertieren Sie die HTML-Reihenfolge Ihrer gewünschten Elemente in HTML und verwenden Sie den Operator
~
Nächste Geschwister :float-right
+ Kehren Sie die Reihenfolge der HTML-Elemente umEltern mit
direction: rtl;
+ kehren die Reihenfolge der inneren Elemente umquelle
Sie können die beiden Axt- Selektoren verwenden:
!
und?
Es gibt 2 nachfolgende Geschwister-Selektoren in herkömmlichem CSS:
+
ist der unmittelbar nachfolgende Geschwister-Selektor~
ist jede nachfolgende Geschwister SelektorIn herkömmlichem CSS gibt es keinen vorherigen Geschwister-Selektor .
In der Axe CSS-Postprozessorbibliothek gibt es jedoch zwei vorherige Geschwister-Selektoren :
?
ist der unmittelbar vorhergehende Geschwister-Selektor (Gegenteil von+
)!
ist jeder vorherigen Geschwister Selektor (gegenüber~
)Arbeitsbeispiel:
Im folgenden Beispiel:
.any-subsequent:hover ~ div
wählt eine beliebige nachfolgende ausdiv
.immediate-subsequent:hover + div
wählt die unmittelbar folgende ausdiv
.any-previous:hover ! div
wählt eine vorherige ausdiv
.immediate-previous:hover ? div
wählt den unmittelbar vorhergehenden ausdiv
quelle
Eine weitere Flexbox-Lösung
Sie können die Reihenfolge der Elemente in HTML invers verwenden. Dann neben der Verwendung
order
in als Michael_B Antwort können Sie verwenden ,flex-direction: row-reverse;
oderflex-direction: column-reverse;
auf der Anlage abhängig.Arbeitsprobe:
quelle
Derzeit gibt es keinen offiziellen Weg, dies zu tun, aber Sie können einen kleinen Trick verwenden, um dies zu erreichen! Denken Sie daran, dass es experimentell ist und einige Einschränkungen aufweist ... (Überprüfen Sie diesen Link, wenn Sie Bedenken hinsichtlich der Kompatibilität des Navigators haben.)
Sie können einen CSS3-Selektor verwenden: die aufgerufene Pseudoklasse
nth-child()
Einschränkungen
quelle
:nth-child(-n+4)
eine Pseudoklasse ist, die auf einen Selektor angewendet werden muss, um richtig zu funktionieren. Wenn Sie nicht überzeugt sind, versuchen Sie es mit einer Gabel meiner Geige zu experimentieren und Sie werden sehen, dass es nicht wok*
Selektor knotentypunabhängig werden, aber es ist eine widerlich schlechte Praxis.li#someListItem
ich wollte die Knoten direkt davor (so interpretiere ich "vorherige") - ich sehe nicht, wie die von Ihnen angegebenen Informationen mir helfen können, dies durch CSS auszudrücken. Sie wählen nur die ersten n Geschwister aus und nehmen an, dass ich die n kenne. Basierend auf dieser Logik kann jeder Selektor den Trick ausführen und die Elemente auswählen, die ich benötige (z. B.: Not ()).Wenn Sie die genaue Position kennen, würde ein
:nth-child()
basierter Ausschluss aller folgenden Geschwister funktionieren.Welches würde alle auswählen
li
s vor dem 3. (zB 1. und 2.). Aber meiner Meinung nach sieht das hässlich aus und hat einen sehr engen Anwendungsfall.Sie können auch das n-te Kind von rechts nach links auswählen:
Welches macht das gleiche.
quelle
Nein, es ist nicht über CSS möglich. Es nimmt die "Kaskade" zu Herzen ;-).
Wenn Sie jedoch JavaScript zu Ihrer Seite hinzufügen können , können Sie mit ein wenig jQuery Ihr Endziel erreichen.
Sie können jQuery's verwenden
find
, um einen "Look-Ahead" für Ihr Zielelement / Ihre Zielklasse / ID durchzuführen, und dann einen Backtrack durchführen, um Ihr Ziel auszuwählen.Anschließend verwenden Sie jQuery, um das DOM (CSS) für Ihr Element neu zu schreiben.
Basierend auf dieser Antwort von Mike Brant könnte das folgende jQuery-Snippet helfen.
Dies wählt zuerst alle
<ul>
s aus, die unmittelbar auf a folgen<p>
.Dann "zurückverfolgt", um alle vorherigen
<p>
s aus diesem Satz von<ul>
s auszuwählen .Tatsächlich wurde "Vorheriges Geschwister" über jQuery ausgewählt.
Verwenden Sie jetzt die
.css
Funktion, um Ihrem CSS neue Werte für dieses Element zu übergeben.In meinem Fall suchte ich nach einer Möglichkeit, einen DIV mit der ID auszuwählen
#full-width
, aber NUR, wenn er einen (indirekten) Nachkommen-DIV mit der Klasse von hatte.companies
.Ich hatte die Kontrolle über den gesamten HTML-Code
.companies
, konnte aber keinen der darüber liegenden HTML-Code ändern.Und die Kaskade geht nur in eine Richtung: nach unten.
Somit konnte ich ALLE
#full-width
s auswählen .Oder ich könnte auswählen,
.companies
dass nur ein folgte#full-width
.Aber ich konnte nicht nur
#full-width
s auswählen , die weitergingen.companies
.Und wieder konnte ich nicht hinzufügen
.companies
keine höheren Werte im HTML . Dieser Teil des HTML-Codes wurde extern geschrieben und hat unseren Code verpackt.Aber mit jQuery, ich kann die erforderlichen wählen
#full-width
s, weisen dann den entsprechenden Stil:Dies findet alle
#full-width .companies
und wählt nur diejenigen aus.companies
, ähnlich wie Selektoren verwendet werden, um bestimmte Elemente im Standard in CSS anzuvisieren.Anschließend wird
.parents
"Backtrack" verwendet und ALLE übergeordneten Elemente von ausgewählt.companies
,diese Ergebnisse werden jedoch gefiltert, um nur
#fill-width
Elemente beizubehalten, sodass am Endenur dann ein
#full-width
Element ausgewählt wird, wenn es einen.companies
Klassennachkommen hat.Schließlich weist es
width
dem resultierenden Element einen neuen CSS ( ) -Wert zu.jQuery-Referenzdokumente:
$ () oder jQuery () : DOM-Element.
. find : Ruft die Nachkommen jedes Elements in der aktuellen Gruppe übereinstimmender Elemente ab, gefiltert nach einem Selektor, einem jQuery-Objekt oder einem Element.
. Eltern : Holen Sie sich das unmittelbar vorhergehende Geschwister jedes Elements in der Gruppe der übereinstimmenden Elemente. Wenn ein Selektor bereitgestellt wird, ruft er das vorherige Geschwister nur ab, wenn er mit diesem Selektor übereinstimmt (filtert die Ergebnisse so, dass nur die aufgelisteten Elemente / Selektoren enthalten sind).
. CSS: Legen Sie eine oder mehrere CSS-Eigenschaften für den Satz übereinstimmender Elemente fest.
quelle
previousElementSibling
).previousElementSibling()
Für diejenigen, die mit nativen JS-DOM-Funktionen besser vertraut sind, könnte ein weiterer Nicht-CSS-Pfad bereitgestellt werden.+
(nicht vorhandenen) Selektor, den das OP speziell angefordert hat. Betrachten Sie diese Antwort als JS "Hack". Es ist hier, um jemand anderem Zeit zu sparen, die ich aufgewendet habe, um eine Lösung zu finden.Es gibt leider keinen "vorherigen" Geschwister-Selektor, aber Sie können möglicherweise immer noch den gleichen Effekt erzielen, indem Sie die Positionierung verwenden (z. B. nach rechts schweben). Es hängt davon ab, was Sie versuchen zu tun.
In meinem Fall wollte ich in erster Linie ein CSS-5-Sterne-Bewertungssystem. Ich müsste die vorherigen Sterne einfärben (oder das Symbol austauschen). Wenn ich jedes Element nach rechts schwebe, erhalte ich im Wesentlichen den gleichen Effekt (das HTML für die Sterne muss daher "rückwärts" geschrieben werden).
In diesem Beispiel verwende ich FontAwesome und wechsle zwischen den Unicodes von fa-star-o und fa-star. Http://fortawesome.github.io/Font-Awesome/
CSS:
HTML: (40)
JSFiddle: http://jsfiddle.net/andrewleyva/88j0105g/
quelle
+
oder~
Selektoren scheinen mir die sauberste Arbeit zu sein.Abhängig von Ihrem genauen Ziel gibt es eine Möglichkeit, die Nützlichkeit eines übergeordneten Selektors zu erreichen, ohne einen zu verwenden (selbst wenn einer existieren würde) ...
Sagen wir, wir haben:
Was können wir tun, um den Sockenblock (einschließlich der Sockenfarben) durch Abstände optisch hervorzuheben?
Was wäre schön, existiert aber nicht:
Was gibt es:
Dadurch werden alle Ankerlinks so eingestellt, dass sie oben einen Rand von 15 Pixel haben, und für diejenigen ohne UL-Elemente (oder andere Tags) in LIs wird dieser Wert auf 0 zurückgesetzt.
quelle
Ich brauchte eine Lösung, um das vorherige Geschwister tr auszuwählen. Ich habe diese Lösung mit React- und Styled-Komponenten entwickelt. Dies ist nicht meine genaue Lösung (Dies ist aus dem Gedächtnis, Stunden später). Ich weiß, dass die Funktion setHighlighterRow fehlerhaft ist.
OnMouseOver eine Zeile setzt den Zeilenindex auf Status und rendert die vorherige Zeile mit einer neuen Hintergrundfarbe
quelle
Ich hatte ein ähnliches Problem und fand heraus, dass alle Probleme dieser Art wie folgt gelöst werden können:
Auf diese Weise können Sie Ihre aktuellen, vorherigen Elemente (alle Elemente, die mit aktuellen und nächsten Elementen überschrieben werden) und Ihre nächsten Elemente formatieren.
Beispiel:
Hoffe es hilft jemandem.
quelle