Pertanyaan Apakah ada pemilih CSS "saudara sebelumnya"?


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


1031
2017-11-30 04:06


asal


Jawaban:


Tidak, tidak ada pemilih "saudara sebelumnya".

Pada catatan terkait, ~ adalah untuk saudara penerus umum (yang berarti elemen datang setelah yang ini, tetapi tidak harus segera setelah) dan merupakan pemilih CSS3. + adalah untuk saudara kandung berikutnya dan CSS2.1.

Lihat Kombinator saudara yang berdekatan dari Selektor Level 3 dan 5.7 Penyeleksi saudara yang berdekatan dari Cascading Style Sheets Level 2 Revisi 1 (CSS 2.1) Keterangan.


665
2017-11-30 04:08



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

Katakanlah Anda memiliki daftar tautan dan ketika melayang di salah satu, semua yang sebelumnya harus berubah menjadi merah. Anda dapat 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>


160
2018-01-16 22:45



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

previous:has(+ next) {}

... tetapi pada saat penulisan, itu adalah beberapa jarak di luar tepi pendarahan untuk dukungan browser.


118
2018-03-19 15:19



Pertimbangkan order milik tata letak flex dan grid.

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


Dengan flexbox, pemilih saudara sebelumnya dapat disimulasikan.

Khususnya, flex order properti dapat memindahkan elemen di sekitar layar.

Inilah contohnya:

Anda ingin elemen A berubah menjadi merah saat elemen B digerakkan.

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

TANGGA

  1. Buatlah ul wadah fleksibel.

    ul { display: flex; }
    

  1. Membalikkan urutan saudara kandung dalam mark-up.

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

  1. Gunakan pemilih saudara untuk menargetkan Elemen A (~ atau + akan melakukan) .

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

  1. Gunakan flex order properti untuk memulihkan urutan saudara kandung pada tampilan visual.

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

... dan voila! Seorang saudara kandung sebelumnya lahir (atau setidaknya simulasi).

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 spesifikasi flexbox:

5.4. Urutan Tampilan: order milik

Item Flex, secara default, ditampilkan dan ditata dalam urutan yang sama seperti yang ditampilkan dalam dokumen sumber. Itu    order properti dapat digunakan untuk mengubah pemesanan ini.

Itu order properti mengontrol urutan di mana item flex muncul dalam wadah fleksibel, dengan menugaskannya ke grup ordinal. Dibutuhkan single <integer> nilai, yang menentukan grup ordinal mana item yang fleksibel   Milik.

Inisial order nilai untuk semua item fleksibel adalah 0.

Juga lihat order dalam spesifikasi CSS Grid Layout.


Contoh "pemilih saudara sebelumnya" dibuat dengan flex order milik.

.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 - Dua Keyakinan Lama tentang CSS

Flexbox menghancurkan keyakinan lama tentang CSS.

Salah satu keyakinan itu adalah itu pemilih saudara sebelumnya tidak mungkin di CSS.

Untuk mengatakan keyakinan ini tersebar luas akan menjadi pernyataan yang meremehkan. Berikut ini contoh pertanyaan terkait pada Stack Overflow saja:

Sebagaimana dijelaskan di atas, keyakinan ini tidak sepenuhnya benar. Pemilih saudara sebelumnya dapat disimulasikan dalam CSS menggunakan flex order milik.

Itu z-index Mitos

Keyakinan lama lainnya adalah hal itu z-index hanya berfungsi pada elemen yang diposisikan.

Bahkan, versi paling terkini dari spesifikasi - Draf Editor W3C - masih menegaskan ini benar:

9.9.1 Menentukan level stack: the z-index   milik

z-index

  • Nilai: otomatis | | mewarisi
  • Awal: otomatis
  • Berlaku untuk: elemen yang diposisikan
  • Warisan: tidak
  • Persentase: T / A
  • Media: visual
  • Nilai yang dihitung: seperti yang ditentukan

(Penekanan ditambahkan)

Namun kenyataannya, informasi ini sudah usang dan tidak akurat.

Elemen yang ada flex item atau item kotak dapat membuat konteks susun bahkan ketika position aku s static.

4.3. Flex Item Z-Pemesanan

Item flex melukis persis sama dengan blok inline, kecuali bahwa pesanan dokumen yang diubah pesanan digunakan sebagai pengganti mentah   dokumen pesanan, dan z-index nilai selain auto buat konteks susun bahkan jika position aku s static.

5.4. Pemesanan Z-axis: z-index milik

Urutan lukisan item grid persis sama dengan blok inline, kecuali urutan dokumen yang diubah pesanan   digunakan sebagai pengganti pesanan dokumen mentah, dan z-index nilai selain auto buat konteks susun bahkan jika    position aku s static.

Berikut ini demonstrasi z-index bekerja pada item flex yang tidak diposisikan: https://jsfiddle.net/m0wddwxs/


99
2018-03-20 18:49



Saya memiliki pertanyaan yang sama, tetapi kemudian saya mengalami momen "duh". Daripada menulis

x ~ y

menulis

y ~ x

Tentunya ini cocok dengan "x" bukannya "y", tetapi ia menjawab "apakah ada kecocokan?" pertanyaan, dan DOM traversal sederhana mungkin membawa Anda ke elemen yang tepat lebih efisien daripada perulangan dalam javascript.

Saya menyadari bahwa pertanyaan asli adalah pertanyaan CSS sehingga jawaban ini mungkin benar-benar tidak relevan, tetapi pengguna Javascript lainnya mungkin tersandung pada pertanyaan melalui pencarian seperti yang saya lakukan.


65
2017-11-30 16:40



Dua Trik. Pada dasarnya membalik urutan HTML elemen yang Anda inginkan dalam HTML dan menggunakan
~  Saudara kandung berikutnya operator:

float-right  + inverse 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>


Orangtua dengan direction: rtl; + inverse urutan elemen batin

.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



Solusi flexbox lainnya

Anda dapat menggunakan inverse urutan elemen dalam HTML. Kemudian selain menggunakan order seperti dalam Jawaban Michael_B Kamu dapat memakai 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>


11
2018-01-14 17:33



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

Apa yang dapat Anda lakukan adalah menggunakan pemilih CSS3: pseudo classe yang 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 dari elemen selanjutnya
  • Ini sama untuk kelas pseudo

11
2017-09-03 16:16