Frage Gibt es einen CSS-Selektor für "vorhergehende Geschwister"?


+ ist für das nächste Geschwister. Gibt es ein Äquivalent für das vorherige Geschwister?


1031
2017-11-30 04:06


Ursprung


Antworten:


Nein, es gibt keinen "vorherigen Geschwister" -Wähler.

Auf eine verwandte Anmerkung, ~ ist für den allgemeinen Nachfolger Geschwister (dh das Element kommt nach diesem, aber nicht unbedingt unmittelbar danach) und ist ein CSS3 Selektor. + ist für nächstes Geschwister und ist CSS2.1.

Sehen Angrenzender Geschwisterkombinator von Selektoren Level 3 und 5.7 Benachbarte Geschwisterselektoren von Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Spezifikation.


665
2017-11-30 04:08



Ich habe einen Weg gefunden, alle vorherigen Geschwister (gegenüber von ~) das funktioniert je nachdem, was Sie brauchen.

Nehmen wir an, Sie haben eine Liste von Links und wenn Sie auf einem stehen, sollten alle vorherigen rot werden. Du kannst es so machen:

/* default link color is blue */
.parent a {
  color: blue;
}

/* prev siblings should be red */
.parent:hover a {
  color: red;
}
.parent a:hover,
.parent a:hover ~ a {
  color: blue;
}
<div class="parent">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>


160
2018-01-16 22:45



Selektoren Ebene 4 führt ein :has() (Vorher der Betreff-Indikator !), mit dem Sie ein vorheriges Geschwister auswählen können mit:

previous:has(+ next) {}

... aber zum Zeitpunkt des Schreibens ist es eine gewisse Entfernung, die über die Grenzen der Browserunterstützung hinausgeht.


118
2018-03-19 15:19



Bedenke die order Eigenschaft von Flex- und Rasterlayouts.

In den folgenden Beispielen werde ich mich auf flexbox konzentrieren, aber die gleichen Konzepte gelten auch für Grid.


Mit flexbox kann ein vorheriger Geschwisterwähler simuliert werden.

Insbesondere der Flex order Eigenschaft kann Elemente auf dem Bildschirm verschieben.

Hier ist ein Beispiel:

Sie möchten, dass Element A rot wird, wenn Element B schwebt.

<ul>
    <li>A</li>
    <li>B</li>
</ul>

SCHRITTE

  1. Mach das ul ein flexibler Behälter.

    ul { display: flex; }
    

  1. Kehren Sie die Reihenfolge der Geschwister im Markup um.

    <ul>
       <li>B</li>
       <li>A</li>
    </ul>
    

  1. Verwenden Sie einen Geschwisterselektor, um auf Element A zu zielen (~ oder + Wird besorgt) .

    li:hover + li { background-color: red; }
    

  1. Benutze den Flex order Eigenschaft zum Wiederherstellen der Reihenfolge der Geschwister auf der visuellen Anzeige.

    li:last-child { order: -1; }
    

... und voilà! Ein vorheriger Geschwisterselektor wird geboren (oder zumindest simuliert).

Hier ist der vollständige Code:

ul {
    display: flex;
}

li:hover + li {
    background-color: red;
}

li:last-child {
    order: -1;
}

/* non-essential decorative styles */
li {
    height: 200px;
    width: 200px;
    background-color: aqua;
    margin: 5px;
    list-style-type: none;
    cursor: pointer;
}
<ul>
    <li>B</li>
    <li>A</li>
</ul>

Aus der Flexbox-Spezifikation:

5.4. Anzeigereihenfolge: der order Eigentum

Flex-Elemente werden standardmäßig in derselben Reihenfolge angezeigt und angeordnet, in der sie im Quelldokument angezeigt werden. Das    order Eigenschaft kann verwendet werden, um diese Reihenfolge zu ändern.

Das order Eigenschaft bestimmt die Reihenfolge, in der Flex-Objekte im Flex-Container angezeigt werden, indem sie ihnen Ordnungsgruppen zugewiesen werden. Es dauert ein einziges <integer> Wert, der angibt, welche Ordinalgruppe das Flex-Element ist   gehört.

Die Initiale order Wert für alle Flex-Elemente ist 0.

Siehe auch order in der CSS-Grid-Layout-Spezifikation.


Beispiele für "vorherige Geschwisterselektoren", die mit dem Flex erstellt wurden order Eigentum.

.container { display: flex; }

.box5 { order: 1; }    
.box5:hover + .box4 { background-color: orangered; font-size: 1.5em; }

.box6 { order: -4; }
.box7 { order: -3; }
.box8 { order: -2; }
.box9 { order: -1; }
.box9:hover ~ :not(.box12):nth-child(-1n+5) { background-color: orangered;
                                              font-size: 1.5em; }
.box12 { order: 2; }
.box12:hover ~ :nth-last-child(-1n+2) { background-color: orangered;
                                        font-size: 1.5em; }
.box21 { order: 1; }
.box21:hover ~ .box { background-color: orangered; font-size: 1.5em; }

/* non-essential decorative styles */
.container {
    padding: 5px;
    background-color: #888;
}
.box {
    height: 50px;
    width: 75px;
    margin: 5px;
    background-color: lightgreen;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}
<p>
Using the flex <code>order</code> property to construct a previous sibling selector
</p>

<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
    <div class="box box3"><span>3</span></div>
    <div class="box box5"><span>HOVER ME</span></div>
    <div class="box box4"><span>4</span></div>
</div>

<br>

<div class="container">
    <div class="box box9"><span>HOVER ME</span></div>
    <div class="box box12"><span>HOVER ME</span></div>
    <div class="box box6"><span>6</span></div>
    <div class="box box7"><span>7</span></div>
    <div class="box box8"><span>8</span></div>
    <div class="box box10"><span>10</span></div>
    <div class="box box11"><span>11</span></div>
</div>

<br>

<div class="container">
    <div class="box box21"><span>HOVER ME</span></div>
    <div class="box box13"><span>13</span></div>
    <div class="box box14"><span>14</span></div>
    <div class="box box15"><span>15</span></div>
    <div class="box box16"><span>16</span></div>
    <div class="box box17"><span>17</span></div>
    <div class="box box18"><span>18</span></div>
    <div class="box box19"><span>19</span></div>
    <div class="box box20"><span>20</span></div>
</div>

jsFiddle


Eine Randnotiz - Zwei veraltete Ansichten über CSS

Flexbox zerschmettert lange gehaltene Ansichten über CSS.

Eine solche Überzeugung ist das Ein vorheriger Geschwisterselektor ist in CSS nicht möglich.

Zu sagen, dass dieser Glaube weit verbreitet ist, wäre eine Untertreibung. Hier finden Sie eine Auswahl verwandter Fragen zu Stack Overflow:

Wie oben beschrieben, ist diese Annahme nicht vollständig richtig. Ein vorheriger Geschwisterselektor kann in CSS mithilfe des Flex simuliert werden order Eigentum.

Das z-index Mythos

Ein anderer langjähriger Glaube ist das gewesen z-index funktioniert nur bei positionierten Elementen.

In der Tat, die neueste Version der Spezifikation - die W3C Editor's Entwurf - behauptet immer noch, dies sei wahr:

9.9.1 Angabe der Stack-Ebene: Die z-index   Eigentum

z-index

  • Wert: auto | | erben
  • Anfänglich: automatisch
  • Gilt für: positionierte Elemente
  • Vererbt: Nein
  • Prozentsätze: N / A
  • Medien: visuell
  • Berechneter Wert: wie angegeben

(Betonung hinzugefügt)

In Wirklichkeit sind diese Informationen jedoch veraltet und ungenau.

Elemente, die sind Flex-Artikel oder Rasterelemente kann Stapelkontexte erstellen, selbst wenn position ist static.

4.3. Flex Item Z-Bestellung

Flex-Elemente zeichnen sich genau so wie Inline-Blöcke aus, mit der Ausnahme, dass die Reihenfolge der Reihenfolge geänderter Dokumente anstelle von Rohdaten verwendet wird   Dokumentenauftrag und z-index andere Werte als auto Erstellen Sie einen Stapelkontext, auch wenn position ist static.

5.4. Z-Achse Bestellung: die z-index Eigentum

Die Reihenfolge der Rasterelemente ist genau dieselbe wie die der Inline-Blöcke, mit Ausnahme der Reihenfolge der Reihenfolge der geänderten Dokumente   anstelle der ursprünglichen Dokumentenreihenfolge verwendet und z-index andere Werte als auto Erstellen Sie einen Stapelkontext, auch wenn    position ist static.

Hier ist eine Demonstration von z-index Arbeiten an nicht positionierten Flex-Elementen: https://jsfiddle.net/m0wddwxs/


99
2018-03-20 18:49



Ich hatte die gleiche Frage, aber dann hatte ich einen "Duh" -Moment. Anstatt zu schreiben

x ~ y

schreiben

y ~ x

Offensichtlich entspricht dies "x" anstelle von "y", aber es beantwortet die Frage "Gibt es eine Übereinstimmung?" Frage, und einfaches DOM-Traversal kann Sie effizienter zum richtigen Element bringen als das Durchlaufen von JavaScript.

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önnten über die Suche auf die Frage stoßen, wie ich es getan habe.


65
2017-11-30 16:40



Zwei Tricks. Im Grunde die HTML-Reihenfolge der gewünschten Elemente in HTML invertieren und verwenden
~  Nächste Geschwister Operator:

float-right  + Inverse Reihenfolge der HTML-Elemente

div{ /* Do with the parent whatever you know just to make the
  inner float-right elements appear where desired */
  display:inline-block;
}
span{
  float:right;  /* float-right the elements! */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
  background:red;
} 
<div>
  <!-- Reverse the order of inner elements -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>


Elternteil mit direction: rtl; + umgekehrt die Reihenfolge der inneren Elemente

.inverse{
  direction: rtl;
  display: inline-block; /* inline-block to keep parent at the left of window */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
  background:gold;
}
Hover one span and see the previous elements being targeted!<br>

<div class="inverse">
  <!-- Reverse the order of inner elements -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>


20
2017-08-19 01:52



Eine weitere Flexbox-Lösung

Sie können die Reihenfolge der Elemente in HTML umgekehrt verwenden. Dann neben der Verwendung order wie in Michael_Bs Antwort Sie können verwenden flex-direction: row-reverse; oder flex-direction: column-reverse; abhängig von Ihrem Layout.

Arbeitsprobe:

.flex {
  display: flex;
  flex-direction: row-reverse;
   /* Align content at the "reversed" end i.e. beginning */
  justify-content: flex-end;
}

/* On hover target its "previous" elements */
.flex-item:hover ~ .flex-item {
  background-color: lime;
}

/* styles just for demo */
.flex-item {
  background-color: orange;
  color: white;
  padding: 20px;
  font-size: 3rem;
  border-radius: 50%;
}
<div class="flex">
  <div class="flex-item">5</div>
  <div class="flex-item">4</div>
  <div class="flex-item">3</div>
  <div class="flex-item">2</div>
  <div class="flex-item">1</div>
</div>


11
2018-01-14 17:33



Im Moment gibt es dafür keinen offiziellen Weg, aber Sie können einen kleinen Trick anwenden, um dies zu erreichen! Denken Sie daran, dass es experimentell ist und einige Einschränkungen hat ... (prüfen dieser Link wenn Sie sich um Navigator-Kompatibilität sorgen)

Was Sie tun können, ist ein CSS3-Selektor: die Pseudoklasse genannt nth-child()

#list>* {
  display: inline-block;
  padding: 20px 28px;
  margin-right: 5px;
  border: 1px solid #bbb;
  background: #ddd;
  color: #444;
  margin: 0.4em 0;
}

#list :nth-child(-n+4) {
  color: #600b90;
  border: 1px dashed red;
  background: orange;
}
<p>The oranges elements are the previous sibling li selected using li:nth-child(-n+4)</p>

<div id="list">
  <span>1</span><!-- this will be selected -->
  <p>2</p><!-- this will be selected -->
  <p>3</p><!-- this will be selected -->
  <div>4</div><!-- this will be selected -->
  <div>5</div>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
</div>

Einschränkungen

  • Sie können keine vorherigen Elemente basierend auf den Klassen der nächsten Elemente auswählen
  • Dies gilt auch für Pseudoklassen

11
2017-09-03 16:16



+ ist für das nächste Geschwister. Gibt es ein Äquivalent für das vorherige?   Geschwister?

Sie können die zwei verwenden Axt Selektoren: ! und ?

Es gibt 2 nachfolgende Geschwisterselektoren


11
2018-04-25 09:59



Wenn Sie die genaue Position kennen :nth-child()Der Ausschluss aller folgenden Geschwister würde funktionieren.

ul li:not(:nth-child(n+3))

Welches würde alles auswählen lis vor dem 3. (z. B. 1. und 2.). Aber meiner Meinung nach sieht das hässlich aus und hat einen sehr engen Anwendungsfall.

Sie könnten auch das n-te Kind von rechts nach links auswählen:

ul li:nth-child(-n+2)

Was das Gleiche macht.


4
2017-08-29 15:27