Memilih saudara sebelumnya dengan CSS :has()

Salah satu batasan CSS yang lebih menjengkelkan adalah ketidakmampuannya untuk memilih elemen berdasarkan anak atau saudara sebelumnya. Hal ini membuat tidak mungkin untuk membuat pemilih CSS yang dapat menargetkan saudara sebelumnya dari suatu elemen, tetapi has:() pseudo-class (bersama dengan :not(), :where()Dan :is() dari Selectors Level 4) telah membuang batasan lama dan membuka kemungkinan dunia baru saat bekerja dengan penyeleksi.

Pada tulisan ini, :has() didukung oleh 84.68% dari semua browser utama (termasuk Chrome dan Safari), dengan Firefox sebagai pengecualian. Dukungan eksperimental untuk Firefox diluncurkan pada Juli 2022 dan dapat diaktifkan melalui bendera layout.css.has-selector.enabled—Anda dapat melacak kemajuan melalui masalah Bugzilla ini. Sampai kapal itu dikirimkan, Anda dapat menggunakan :has() pseudo-class jika Anda tidak menargetkan atau mendukung Firefox, atau jika Anda menggunakan polyfill.

Memilih saudara sebelumnya

Bayangkan kita memiliki serangkaian elemen, seperti ini:

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="circle"></div>
<div class="box"></div>

…dan kami ingin memilih dan menata elemen yang muncul sebelum lingkaran. Kombinator saudara yang berdekatan (+) dapat memilih elemen yang langsung mengikuti elemen lain, dan kita dapat menggabungkannya :has() bahwa untuk memilih hanya .box yang segera diikuti oleh a .circle (atau dari perspektif lingkaran, saudara sebelumnya):

.box:has(+ .circle) 
  width: 40px;
  height: 40px;

Anda dapat menganggap pemilih ini sebagai yang pertama 1) memilih semua kotak, lalu 2) memfilter elemen hanya yang cocok dengan pola “kotak + lingkaran”, yang hanya akan mengembalikan saudara lingkaran sebelumnya.

Memilih saudara ke-n sebelumnya

Dimungkinkan untuk menggunakan penggabung saudara yang berdekatan untuk memilih elemen spesifik apa pun yang mendahului yang lain. Kita dapat memilih saudara kandung ke-2 sebelumnya dengan menggunakan dua kombinator saudara yang berdekatan:

.box:has(+ * + .circle) 
  width: 40px;
  height: 40px;

Jika Anda mau, Anda bisa sama-sama membatasi pemilih ke kelas (daripada catch-all *). Dalam hal ini .box saudara:

.box:has(+ .box + .circle) 
  width: 40px;
  height: 40px;

Pemilih ini mungkin sulit untuk di-grok dan diurai. Mungkin membantu untuk menganggapnya sebagai memilih semua kotak (.box), lalu memfilter elemen-elemen tersebut sehingga tersisa .box adalah yang cocok dengan pola “diri + kotak + lingkaran”, yang hanya akan menjadi saudara kandung ke-2 sebelumnya.

Jika Anda ingin memilih saudara ke-3 sebelumnya, Anda dapat menggunakan tiga kombinator saudara yang berdekatan…

.box:has(+ * + * + .circle) 
  width: 40px;
  height: 40px;

…dan seterusnya dan seterusnya. Anda dapat terus menambahkan kombinator saudara yang berdekatan (+) selama yang Anda inginkan, untuk memilih elemen ke-n sebelumnya.

Memilih semua saudara sebelumnya

Jika Anda ingin memilih semua saudara sebelumnya, Anda dapat menggabungkan :has() pseudo-class dengan kombinator saudara umum (~), yang cocok dengan elemen kedua selama mengikuti elemen pertama, terlepas dari posisinya:

.box:has(~ .circle) 
  width: 40px;
  height: 40px;

Dengan kata lain, selama .box dalam contoh ini diikuti oleh a .circle di beberapa titik, .box akan dipilih dan ditata.

Memilih semua saudara sebelumnya kecuali saudara yang paling berdekatan

Akhirnya, kita dapat menggabungkan kombinator saudara umum (~) dengan kombinator saudara yang berdekatan (+) dan pilih semua elemen sebelumnya kecuali yang paling berdekatan:

.box:has(~ * + .circle) 
  width: 40px;
  height: 40px;

Pemilih ini memilih apa saja .box yang cocok dengan pola “diri diikuti oleh sembarang titik kotak + lingkaran”.