Tanda tambah ( +) adalah untuk saudara kandung berikutnya.

Apakah ada yang setara untuk saudara sebelumnya?

Tidak, tidak ada pemilih "saudara sebelumnya".

Pada catatan terkait, ~untuk saudara pengganti umum (artinya elemen datang setelah yang satu ini, tetapi tidak harus segera setelah itu) dan merupakan pemilih CSS3. +untuk saudara berikutnya dan CSS2.1.

Lihat Combinator Saudara Adjacent dari Selectors Level 3 dan 5.7 Selector Adjacent Adjacent dari Cascading Style Sheets Level 2 Revisi 1 (CSS 2.1) Spesifikasi .

Saya menemukan cara untuk gaya semua saudara sebelumnya (kebalikan dari ~) yang dapat bekerja tergantung pada apa yang Anda butuhkan.

Katakanlah Anda memiliki daftar tautan dan ketika melayang di satu tautan, semua yang sebelumnya akan berubah menjadi merah. Anda bisa melakukannya seperti ini:

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

Selektor level 4 memperkenalkan:has() (sebelumnya indikator subjek !) yang akan memungkinkan Anda memilih saudara sebelumnya dengan:

previous:has(+ next) {}

... tetapi pada saat penulisan, ini agak jauh melampaui batas pendarahan untuk dukungan browser.

Pertimbangkan orderproperti tata letak fleksibel dan kisi.

Saya akan fokus pada flexbox pada contoh di bawah ini, tetapi konsep yang sama berlaku untuk Grid.

Dengan flexbox, pemilih saudara sebelumnya dapat disimulasikan.

Secara khusus, orderproperti fleksibel dapat memindahkan elemen di sekitar layar.

Ini sebuah contoh:

Anda ingin elemen A menjadi merah ketika elemen B melayang.

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

LANGKAH

1. Buat ulwadah fleksibel.
   
   

   ul { display: flex; }

2. Balikkan urutan saudara kandung dalam mark-up.
   
   

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

3. Gunakan pemilih saudara untuk menargetkan Elemen A ( ~atau +akan melakukannya).
   
   

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

4. Gunakan orderproperti flex untuk mengembalikan urutan saudara pada tampilan visual.
   
   

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

... dan voila! Selector saudara kandung sebelumnya lahir (atau setidaknya disimulasikan).

Berikut kode lengkapnya:

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>

Dari spec flexbox:

5.4. Urutan Tampilan: orderproperti

Item fleksibel, secara default, ditampilkan dan ditata dalam urutan yang sama seperti yang muncul dalam dokumen sumber. The orderproperti dapat digunakan untuk mengubah urutan ini.

The orderkontrol properti urutan item fleksibel muncul dalam wadah flex, dengan menetapkan mereka untuk kelompok ordinal. Dibutuhkan <integer>nilai tunggal , yang menentukan kelompok ordinal mana item flex milik.

Nilai awal orderuntuk semua item fleksibel adalah 0.

Lihat juga orderdalam spesifikasi Layout Kotak CSS .

Contoh "penyeleksi saudara sebelumnya" dibuat dengan orderproperti flex .

.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

Catatan Samping - Dua Keyakinan Lama tentang CSS

Flexbox menghancurkan keyakinan lama tentang CSS.

Salah satu kepercayaan seperti itu adalah bahwa pemilih saudara kandung sebelumnya tidak mungkin dalam CSS .

Untuk mengatakan kepercayaan ini tersebar luas akan menjadi pernyataan yang meremehkan. Inilah contoh pertanyaan terkait tentang Stack Overflow saja:

• Pilih saudara sebelumnya dari suatu elemen di CSS menggunakan penyeleksi
• CSS: pilih saudara sebelumnya
• CSS memilih saudara sebelumnya
• Selektor sebelumnya yang berdekatan di CSS
• Pilih saudara sebelumnya di hover
• Pemilih CSS untuk mendapatkan saudara sebelumnya
• Ubah warna elemen saudara saat melayang menggunakan CSS
• Cara memilih saudara sebelumnya menggunakan sintaks selenium css
• Pemilih CSS untuk memilih elemen yang datang SEBELUM elemen lain?
• Cara menambahkan styling ke saudara input aktif sebelumnya hanya menggunakan CSS
• Pemilih CSS untuk elemen berikutnya dan sebelumnya
• Bagaimana memengaruhi elemen-elemen lain saat div melayang

Seperti dijelaskan di atas, kepercayaan ini tidak sepenuhnya benar. Pemilih saudara sebelumnya dapat disimulasikan dalam CSS menggunakan orderproperti flex .

The z-indexMyth

Keyakinan lama lainnya adalah bahwa z-indexhanya bekerja pada elemen-elemen yang diposisikan.

Faktanya, versi terbaru dari spec - the W3C Editor's Draft - masih menyatakan ini benar:

9.9.1 Menentukan level tumpukan: z-index properti

z-index

• Nilai: otomatis | | mewarisi
• Awal: otomatis
• Berlaku untuk: elemen yang diposisikan
• Warisan: no
• Persentase: Tidak Ada
• Media: visual
• Nilai yang dihitung: seperti yang ditentukan

_{(penekanan ditambahkan)}

Namun pada kenyataannya, informasi ini sudah usang dan tidak akurat.

Elemen yang merupakan item fleksibel atau item kisi dapat membuat konteks penumpukan bahkan ketika positionada static.

4.3. Item Z-Pemesanan Flex

Item fleksibel cat persis sama dengan blok inline, kecuali bahwa urutan dokumen yang dimodifikasi pesanan digunakan di tempat pesanan dokumen mentah, dan z-indexnilai-nilai selain automembuat konteks penumpukan bahkan jika positionada static.

5.4. Z-axis Ordering: z-indexproperti

Urutan lukisan item grid persis sama dengan blok inline, kecuali bahwa agar dokumen pesanan-dimodifikasi digunakan di tempat agar dokumen mentah, dan z-indexnilai-nilai selain automenciptakan konteks susun bahkan jika positionini static.

Berikut ini demonstrasi z-indexbekerja pada item fleksibel yang tidak diposisikan: https://jsfiddle.net/m0wddwxs/

Saya memiliki pertanyaan yang sama, tetapi kemudian saya memiliki momen "duh". Alih-alih menulis

x ~ y

menulis

y ~ x

Jelas ini cocok dengan "x" bukan "y", tetapi menjawab "apakah ada kecocokan?" pertanyaan, dan traversal DOM sederhana dapat membuat Anda ke elemen yang tepat lebih efisien daripada perulangan di javascript.

Saya menyadari bahwa pertanyaan awal adalah pertanyaan CSS jadi jawaban ini mungkin sama sekali tidak relevan, tetapi pengguna Javascript lain mungkin tersandung pada pertanyaan melalui pencarian seperti yang saya lakukan.

Dua trik . Pada dasarnya membalikkan urutan HTML elemen yang Anda inginkan dalam HTML dan menggunakan
~ operator saudara kandung berikutnya :

float-right + membalik urutan elemen 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>

Induk dengan direction: rtl;+ terbalik urutan elemen dalam

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

+adalah untuk saudara kandung berikutnya. Apakah ada yang setara untuk saudara sebelumnya?

Anda dapat menggunakan dua penyeleksi kapak :! dan?

Ada 2 penyeleksi saudara berikutnya dalam CSS konvensional:

• +adalah yang langsung pemilih saudara berikutnya
• ~adalah setiap pemilih saudara berikutnya

Dalam CSS konvensional, tidak ada pemilih saudara sebelumnya .

Namun, di pustaka pasca-prosesor kapak CSS, ada 2 penyeleksi saudara sebelumnya :

• ?adalah pemilih saudara langsung sebelumnya (kebalikan dari+ )
• !adalah setiap pemilih saudara sebelumnya (kebalikan dari ~)

Contoh kerja:

Dalam contoh di bawah ini:

• .any-subsequent:hover ~ div memilih yang selanjutnya div
• .immediate-subsequent:hover + div memilih yang selanjutnya langsung div
• .any-previous:hover ! div memilih yang sebelumnya div
• .immediate-previous:hover ? div memilih yang sebelumnya langsung 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>

Solusi flexbox lainnya

Anda dapat menggunakan urutan elemen terbalik dalam HTML. Kemudian selain menggunakan orderseperti pada jawaban Michael_B Anda dapat menggunakan flex-direction: row-reverse;atau flex-direction: column-reverse;tergantung pada tata letak Anda.

Sampel kerja:

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

Tidak ada cara resmi untuk melakukan itu saat ini tetapi Anda dapat menggunakan sedikit trik untuk mencapai ini! Ingat bahwa ini eksperimental dan memiliki beberapa batasan ... (periksa tautan ini jika Anda khawatir tentang kompatibilitas navigator)

Yang bisa Anda lakukan adalah menggunakan pemilih CSS3: pseudo classe dipanggil 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>

Keterbatasan

• Anda tidak dapat memilih elemen sebelumnya berdasarkan kelas elemen berikutnya
• Ini sama untuk kelas semu

Jika Anda tahu posisi pasti dan :nth-child()pengecualian berbasis semua saudara berikut akan bekerja.

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

Yang akan memilih semua lis sebelum tanggal 3 (mis. 1 dan 2). Tapi, menurut saya ini terlihat jelek dan memiliki usecase yang sangat ketat.

Anda juga dapat memilih anak ke-kanan-ke-kiri:

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

Yang melakukan hal yang sama.

Tidak. Itu tidak mungkin melalui CSS. Dibutuhkan "Cascade" di hati ;-).

Namun, jika Anda dapat menambahkan JavaScript ke halaman Anda, sedikit jQuery dapat membawa Anda ke tujuan akhir Anda.
Anda dapat menggunakan jQuery's finduntuk melakukan "pandangan ke depan" pada elemen target / kelas / id Anda, lalu mundur untuk memilih target Anda.
Kemudian Anda menggunakan jQuery untuk menulis ulang DOM (CSS) untuk elemen Anda.

Berdasarkan jawaban ini oleh Mike Brant , cuplikan jQuery berikut dapat membantu.

$('p + ul').prev('p')

Ini pertama memilih semua <ul>yang segera mengikuti a <p>.
Lalu "backtracks" untuk memilih semua sebelumnya <p>dari set <ul>s.

Secara efektif, "saudara sebelumnya" telah dipilih melalui jQuery.
Sekarang, gunakan .cssfungsi untuk meneruskan nilai baru CSS Anda untuk elemen itu.

Dalam kasus saya, saya sedang mencari cara untuk memilih DIV dengan id #full-width, tetapi HANYA jika memiliki DIV turunan (tidak langsung) dengan kelas .companies.

Saya memiliki kendali atas semua HTML di bawah .companies, tetapi tidak dapat mengubah HTML apa pun di atasnya.
Dan kaskade hanya berjalan 1 arah: turun.

Jadi saya bisa memilih SEMUA #full-widths.
Atau saya bisa memilih .companiesyang hanya mengikuti a #full-width.
Tetapi saya tidak dapat memilih hanya #full-widths yang melanjutkan .companies .

Dan, sekali lagi, saya tidak dapat menambahkan .companies lebih tinggi di HTML. Bagian HTML itu ditulis secara eksternal, dan dibungkus dengan kode kami.

Tetapi dengan jQuery, saya dapat memilih yang diperlukan #full-width, kemudian menetapkan gaya yang sesuai:

$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );

Ini menemukan semua #full-width .companies, dan memilih hanya itu .companies, mirip dengan bagaimana penyeleksi digunakan untuk menargetkan elemen tertentu dalam standar di CSS.
Kemudian ia digunakan .parentsuntuk "mundur" dan memilih SEMUA orang tua dari .companies,
tetapi memfilter hasil tersebut untuk menjaga hanya #fill-widthelemen, sehingga pada akhirnya,
itu hanya memilih #full-widthelemen jika memiliki .companiesturunan kelas.
Akhirnya, ia memberikan nilai CSS ( width) baru ke elemen yang dihasilkan.

$(".parent").find(".change-parent").parents(".parent").css( "background-color", "darkred");

div {
  background-color: lightblue;
  width: 120px;
  height: 40px;
  border: 1px solid gray;
  padding: 5px;
}
.wrapper {
  background-color: blue;
  width: 250px;
  height: 165px;
}
.parent {
  background-color: green;
  width: 200px;
  height: 70px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="wrapper">

  <div class="parent">
    "parent" turns red
    <div class="change-parent">
    descendant: "change-parent"
    </div>
  </div>
  
  <div class="parent">
    "parent" stays green
    <div class="nope">
    descendant: "nope"
    </div>
  </div>
  
</div>
Target <b>"<span style="color:darkgreen">parent</span>"</b> to turn <span style="color:red">red</span>.<br>
<b>Only</b> if it <b>has</b> a descendant of "change-parent".<br>
<br>
(reverse cascade, look ahead, parent un-descendant)
</html>

Dokumen Referensi jQuery:
$ () atau jQuery () : elemen DOM.
. find : Dapatkan turunan dari setiap elemen dalam set elemen yang cocok saat ini, difilter oleh pemilih, objek jQuery, atau elemen.
. orangtua : Dapatkan saudara kandung yang sebelumnya mendahului setiap unsur dalam rangkaian unsur yang cocok. Jika pemilih disediakan, ia hanya mengambil saudara sebelumnya jika cocok dengan pemilih itu (memfilter hasilnya hanya menyertakan elemen / pemilih yang terdaftar).
. css : Tetapkan satu atau lebih properti CSS untuk set elemen yang cocok.

Sayangnya tidak ada pemilih saudara "sebelumnya", tetapi Anda mungkin masih bisa mendapatkan efek yang sama dengan menggunakan pemosisian (mis. Float right). Itu tergantung pada apa yang Anda coba lakukan.

Dalam kasus saya, saya terutama menginginkan sistem peringkat bintang 5 CSS. Saya perlu mewarnai (atau menukar ikon) bintang-bintang sebelumnya. Dengan mengapung setiap elemen dengan benar, pada dasarnya saya mendapatkan efek yang sama (html untuk bintang-bintang karenanya harus ditulis 'mundur').

Saya menggunakan FontAwesome dalam contoh ini dan bertukar antara unicodes fa-star-o dan 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/

Bergantung pada tujuan pasti Anda, ada cara untuk mencapai kegunaan pemilih orang tua tanpa menggunakan satu (bahkan jika ada) ...

Katakanlah kita memiliki:

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

Apa yang bisa kita lakukan untuk membuat blok Socks (termasuk warna kaus kaki) menonjol secara visual menggunakan spasi?

Apa yang baik tetapi tidak ada:

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

Apa yang ada:

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

Ini menetapkan semua tautan jangkar untuk memiliki margin 15px di bagian atas dan mengembalikannya kembali ke 0 untuk mereka yang tidak memiliki elemen UL (atau tag lain) di dalam LI.

Saya membutuhkan solusi untuk memilih saudara kandung sebelumnya. Saya datang dengan solusi ini menggunakan komponen React dan Styled. Ini bukan solusi tepat saya (Ini dari memori, beberapa jam kemudian). Saya tahu ada cacat pada fungsi setHighlighterRow.

OnMouseOver baris akan mengatur indeks baris untuk menyatakan, dan rerender baris sebelumnya dengan warna latar belakang baru

class ReactClass extends Component {
  constructor() {
    this.state = {
       highlightRowIndex: null
    }
  }

  setHighlightedRow = (index) => {
    const highlightRowIndex = index === null ? null : index - 1;
    this.setState({highlightRowIndex});
  }

  render() {
    return (
       <Table>
        <Tbody>
           {arr.map((row, index) => {
                const isHighlighted = index === this.state.highlightRowIndex
                return {
                    <Trow 
                        isHighlighted={isHighlighted}
                        onMouseOver={() => this.setHighlightedRow(index)}
                        onMouseOut={() => this.setHighlightedRow(null)}
                        >
                        ...
                    </Trow>
                }
           })}  
        </Tbody>   
       </Table>
    )
  }
}

const Trow = styled.tr`
    & td {
        background-color: ${p => p.isHighlighted ? 'red' : 'white'};
    }

    &:hover {
        background-color: red;
    }
`;

Tidak ada, dan ada .

Jika Anda harus menempatkan label sebelum input, alih-alih menempatkan label setelah input, simpan label & input di dalam div, dan gaya div sebagai berikut:

.input-box {
  display: flex;
  flex-direction: column-reverse;
}

<div class="input-box">
                <input
                  id="email"
                  class="form-item"
                 
                />
                <label for="email" class="form-item-header">                  
                      E-Mail*                  
                </label>
</div>

Sekarang Anda dapat menerapkan opsi penataan saudara kandung standar berikutnya yang tersedia di css, dan itu akan tampak seperti Anda menggunakan penataan saudara kandung sebelumnya.

Saya memiliki masalah yang sama dan menemukan bahwa semua masalah seperti ini dapat diselesaikan sebagai berikut:

1. beri semua item gaya.
2. beri gaya pada barang pilihan Anda.
3. beri item berikutnya gaya menggunakan + atau ~.

dan dengan cara ini Anda akan dapat menata item Anda saat ini, item sebelumnya (semua item diganti dengan item saat ini dan berikutnya) dan item berikutnya.

contoh:

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

Semoga ini bisa membantu seseorang.