Znalazłem sposób na stylizację wszystkich poprzednich rodzeństw (przeciwieństwo ~), które mogą działać w zależności od tego, czego potrzebujesz.

Załóżmy, że masz listę linków i gdy najedziesz na jeden, wszystkie poprzednie powinny stać się czerwone. Możesz to zrobić tak:

/* 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>

Selektory poziom 4 wprowadza :has() (poprzednio wskaźnik subject !), który pozwoli Ci wybrać poprzednie rodzeństwo z:

previous:has(+ next) {}

... ale w momencie pisania, to jest pewien dystans poza krawędź krwawienia do obsługi przeglądarki.

Rozważ właściwość order układów flex I grid.

skupię się na flexbox w poniższych przykładach, ale te same pojęcia odnoszą się do Grid.

Dzięki flexbox można symulować poprzedni selektor rodzeństwa.

W szczególności właściwość flex order może przesuwać elementy po ekranie.

Oto przykład:

Chcesz, aby element A zmienił kolor na czerwony, gdy element B jest / align = "left" /

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

Kroki

1. Stwórz ul elastyczny Pojemnik.
   
   

   ul { display: flex; }
   

1. Odwróć kolejność rodzeństwa w marce.
   
   

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

1. Użyj selektora rodzeństwa, aby celować w Element a (~ lub +).
   
   

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

1. Użyj właściwości flex order, aby przywrócić porządek rodzeństwa na wizualizacji wyświetlacz.
   
   

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

...i voila! Rodzi się (lub przynajmniej symuluje) poprzedni selekcjoner rodzeństwa.

Oto Pełny kod:

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>

Z flexbox spec:

5.4. Kolejność wyświetlania: właściwość order

Elementy Flex są domyślnie wyświetlane i układane w tej samej kolejności, w jakiej pojawiają się w dokumencie źródłowym. Na order własność może być używane do zmiany tego zamówienia.

Właściwość order kontroluje kolejność, w jakiej elementy flex pojawiają się w kontenerze flex, przypisując je do grup porządkowych. Pobiera pojedynczą wartość <integer>, która określa, która grupa porządkowa elementu flex należy do.

Początkowa wartość order dla wszystkich elementów flex wynosi 0.

Zobacz też order w specyfikacji CSS Grid Layout .

Przykłady "poprzednich selektorów" stworzonych z właściwość flex order.

.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

A Side Note-dwa przestarzałe przekonania o CSS

Flexbox rozbija długo utrzymywane przekonania o CSS.

Jednym z takich przekonań jest to, że poprzedni selektor rodzeństwa nie jest możliwy w CSS.

• zaznaczenie poprzedzającego elementu w CSS za pomocą selektorów
• CSS: select previous sibling
• CSS select previous sibling
• Previous selector in CSS
• Wybierz poprzednie rodzeństwo na hover
• selektor CSS do pobrania
• Zmiana Koloru elementów rodzeństwa po najechaniu na kursor za pomocą CSS
• jak wybrać poprzednie rodzeństwo używając składni css selenium
• selektor CSS do wyboru elementu, który jest przed innym elementem?
• Jak dodać stylizację do poprzedniego rodzeństwa active input używając tylko CSS
• selektor CSS dla kolejnych i poprzednich elementów
• jak wpływać na inne elementy, gdy div jest zawieszony

Jak opisano powyżej, przekonanie to nie jest to prawda. Poprzedni selektor rodzeństwa może być symulowany w CSS przy użyciu właściwości flex order.

z-index Mit

Innym długotrwałym przekonaniem było to, że z-index działa tylko na elementach pozycjonowanych.

9.9.1 określanie poziomu stosu: the z-index nieruchomość

z-index

• Value: auto / / inherit
• Initial: auto
• dotyczy: elementów pozycjonowanych
• odziedziczony: nie
• Procent: Nie Dotyczy
• Media: visual
• obliczona wartość: jak określono

_{(podkreślenie dodane)}

W rzeczywistości jednak INFORMACJA Ta jest przestarzała i niedokładne.

Elementy, które są elementy flex lub elementy siatki może tworzyć konteksty układania nawet wtedy, gdy position jest static.

4.3. Flex Element Z-Zamawianie

Flex items maluje dokładnie tak samo jak bloki w wierszu, z tym wyjątkiem, że zamiast raw używany jest zmodyfikowany porządek dokumentu kolejność dokumentów i wartości z-index inne niż auto tworzą kontekst stosu, nawet jeśli position is static.

5.4. Z-Axis Ordering: the z-index property

Kolejność malowania elementów siatki jest dokładnie taka sama jak w blokach liniowych, z tą różnicą, że kolejność dokumentów zmodyfikowanych według kolejności jest używane zamiast nieprzetworzonego porządku dokumentu, a wartości z-index inne niż auto tworzą kontekst stosu, nawet jeśli position jest static.

Oto demonstracja pracy z-index na niepozycjonowanych elementach flex: https://jsfiddle.net/m0wddwxs/

Miałem to samo pytanie, ale potem miałem moment "duh". Zamiast pisać

x ~ y

Napisz

y ~ x

Oczywiście pasuje do "x" zamiast "y" , ale odpowiada " czy jest dopasowanie?"question, i proste przejście DOM może dostać się do właściwego elementu bardziej efektywnie niż zapętlenie w javascript.

Zdaję sobie sprawę, że pierwotne pytanie było pytaniem CSS, więc ta odpowiedź jest prawdopodobnie całkowicie nieistotna, ale inni użytkownicy Javascript mogą natknąć się na pytanie poprzez Szukaj jak ja.

Dwa triki . Zasadniczo odwrócenie kolejności HTML pożądanych elementów w HTML i użycie
~ następne rodzeństwo operator:

float-right + odwrotność kolejności elementów HTML

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>

Rodzic z direction: rtl; + Odwróć kolejność elementów wewnętrznych

.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>

W tej chwili nie ma oficjalnego sposobu, aby to zrobić, ale możesz użyć małej sztuczki, aby to osiągnąć ! Pamiętaj, że jest eksperymentalny i ma pewne ograniczenia ... (sprawdź ten link jeśli martwisz się o kompatybilność z nawigatorem)

Możesz użyć selektora CSS3: pseudo classe o nazwie 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>

Ograniczenia

• nie można wybrać poprzednich elementów na podstawie klas następnego elementy
• to samo dotyczy pseudo klas

+ jest dla następnego rodzeństwa. Czy istnieje odpowiednik dla poprzedniego rodzeństwo?

Możesz użyć dwóch selektorów axe : ! i ?

Są 2 kolejne selektory rodzeństwa w konwencjonalnym CSS:

• + jest natychmiastowym kolejnym selektorem rodzeństwa
• ~ jest dowolnym kolejnym selektorem rodzeństwa

W konwencjonalnym CSS nie ma poprzedni selektor rodzeństwa .

Jednak w axe CSS post-processor library, są 2 poprzednie selektory rodzeństwa:

• ? jest bezpośrednim poprzednim selektorem rodzeństwa (przeciwieństwem +)
• !jest dowolnym poprzednim selektorem rodzeństwa (przeciwieństwem ~)

Przykład Roboczy:

W poniższym przykładzie:

• .any-subsequent:hover ~ div wybiera kolejne div
• .immediate-subsequent:hover + div wybiera natychmiastowe następne div
• .any-previous:hover ! div wybiera poprzedni div
• .immediate-previous:hover ? div wybiera najbliższy poprzedni div

div {
  display: inline-block;
  width: 60px;
  height: 100px;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

code {
  display: block;
  margin: 4px;
  font-size: 24px;
  line-height: 24px;
  background-color: rgba(0, 0, 0, 0.5);
}

div:nth-of-type(-n+4) {
  background-color: rgb(0, 0, 255);
}

div:nth-of-type(n+3):nth-of-type(-n+6) {
  opacity: 1;
}

.any-subsequent:hover ~ div,
.immediate-subsequent:hover + div,
.any-previous:hover ! div,
.immediate-previous:hover ? div {
  opacity: 1;
}

<h2>Hover over any of the blocks below</h2>

<div></div>
<div></div>

<div class="immediate-previous">Hover for <code>?</code> selector</div>
<div class="any-previous">Hover for <code>!</code> selector</div>
<div class="any-subsequent">Hover for <code>~</code> selector</div>
<div class="immediate-subsequent">Hover for <code>+</code> selector</div>

<div></div>
<div></div>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

Inne rozwiązanie flexbox

Możesz użyć odwrotnej kolejności elementów w HTML. Następnie poza użyciem orderjak w odpowiedzi Michael_B możesz użyć flex-direction: row-reverse; lub flex-direction: column-reverse; w zależności od układu.

Próbka robocza:

.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>

Jeśli znasz dokładną pozycję, wykluczenie wszystkich kolejnych rodzeństwa na podstawie :nth-child() zadziała.

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

, który wybierze wszystkie liS PRZED 3. (np. 1. i 2.). Ale moim zdaniem wygląda to brzydko i ma bardzo ciasne zastosowanie.

Możesz również wybrać NTH-dziecko od prawej do lewej:

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

Który robi to samo.

Nie ma niestety selektora "poprzedni", ale możesz ewentualnie nadal uzyskać ten sam efekt, używając pozycjonowania (np. float right). To zależy od tego, co próbujesz zrobić.

W moim przypadku, chciałem przede wszystkim CSS 5-gwiazdkowy system oceny. Musiałbym pokolorować (lub zamienić ikonę) poprzednie gwiazdki. Pływając każdy element w prawo, mam zasadniczo taki sam efekt(html dla gwiazd więc musi być napisane "wstecz").

Używam FontAwesome w tym przykładzie i zamiana między unicodami FA-star-o i fa-star http://fortawesome.github.io/Font-Awesome/

CSS:

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* set all stars to 'empty star' */
.stars-container {
    display: inline-block;      
}   

/* set all stars to 'empty star' */
.stars-container .star {
    float: right;
    display: inline-block;
    padding: 2px;
    color: orange;
    cursor: pointer;

}

.stars-container .star:before {
    content: "\f006"; /* fontAwesome empty star code */
}

/* set hovered star to 'filled star' */
.star:hover:before{
    content: "\f005"; /* fontAwesome filled star code */
}

/* set all stars after hovered to'filled star' 
** it will appear that it selects all after due to positioning */
.star:hover ~ .star:before {
    content: "\f005"; /* fontAwesome filled star code */
}

HTML: (40)

JSFiddle: http://jsfiddle.net/andrewleyva/88j0105g/

W zależności od konkretnego celu, istnieje sposób, aby osiągnąć użyteczność selektora nadrzędnego bez jego używania (nawet jeśli taki miałby istnieć)...

Powiedzmy, że mamy:

<div>
  <ul>
    <li><a>Pants</a></li>
    <li><a>Socks</a></li>
    <ul>
      <li><a>White socks</a></li>
      <li><a>Blue socks</a></li>
    </ul>
  </ul>
</div>

Co zrobić, aby bloczki skarpet (w tym Kolory skarpet) wyróżniały się wizualnie za pomocą odstępów?

Co byłoby miłe, ale nie istnieje:

ul li ul:parent {
  margin-top: 15px;
  margin-bottom: 15px;
}

Co istnieje:

li > a {
  margin-top: 15px;
  display: block;
}
li > a:only-child {
  margin-top: 0px;
}

To ustawia wszystkie linki kotwiące, aby miały margines 15px na górze i resetuje go z powrotem do 0 dla tych, którzy nie mają UL elementy (lub inne znaczniki) wewnątrz LIs.

Miałem podobny problem i dowiedziałem się, że wszystkie problemy tego rodzaju można rozwiązać w następujący sposób:

1. nadaj wszystkim przedmiotom styl.
2. nadaj wybranemu elementowi styl.
3. nadaj następnym elementom styl używając + lub ~.

I w ten sposób będziesz mógł stylizować swoje bieżące, poprzednie elementy (wszystkie elementy nadpisane przez bieżące i następne elementy) i następne elementy.

Przykład:

/* all items (will be styled as previous) */
li {
  color: blue;
}

/* the item i want to distinguish */
li.milk {
  color: red;
}

/* next items */
li ~ li  {
  color: green;
}


<ul>
  <li>Tea</li>
  <li class="milk">Milk</li>
  <li>Juice</li>
  <li>others</li>
</ul>

Jak już wiele razy zostało powiedziane - z div ~ p zaznaczone są wszystkie <p> Elementy poprzedzone elementem <div>.

Sprawdź tę listę wszystkich selektorów CSS.