CSS terkenal tidak memiliki cara untuk memilih langsung elemen induk berdasarkan
turunannya. Hal ini telah menjadi permintaan teratas oleh developer selama bertahun-tahun. Pemilih
:has()
, yang kini didukung oleh semua browser utama, akan mengatasi hal ini. Sebelum
:has()
, Anda sering merangkai pemilih panjang atau menambahkan class untuk hook penataan gaya. Sekarang
Anda dapat menata gaya berdasarkan hubungan elemen dengan turunannya. Baca selengkapnya
tentang pemilih :has()
di
Digabungkan CSS 2023 dan
5 cuplikan CSS yang harus diketahui oleh setiap developer frontend.
Meskipun terlihat kecil, pemilih ini dapat memungkinkan sejumlah besar kasus penggunaan.
Artikel ini menunjukkan beberapa kasus penggunaan yang dibuka oleh perusahaan e-commerce dengan pemilih :has()
.
:has()
adalah bagian dari Versi Dasar Baru Tersedia.
Baca rangkaian lengkap yang disertakan dalam artikel ini, yang membahas cara perusahaan e-commerce meningkatkan kualitas situs mereka menggunakan fitur CSS dan UI yang baru.
Pasar Kebijakan
Dengan pemilih
:has()
, kami dapat menghapus validasi berbasis JavaScript pada pilihan pengguna dan menggantinya dengan solusi CSS yang berfungsi mulus bagi kami, dengan pengalaman yang sama seperti sebelumnya.—Aman Soni, Tech Lead, Policybazaar
Tim Investasi Policybazaar dengan cerdas menerapkan pemilih :has()
untuk memberikan indikasi visual yang jelas bagi pengguna yang sedang membandingkan rencana. Gambar berikut menampilkan dua jenis rencana dalam UI perbandingan (kuning dan biru). Setiap paket
hanya dapat dibandingkan dengan jenisnya sendiri. Dengan menggunakan :has()
, saat pengguna memilih satu
jenis paket, jenis rencana lainnya tidak dapat dipilih.
Code
:has()
memberi Anda akses untuk menata gaya elemen induk dan turunannya. Kode
berikut memeriksa apakah penampung induk memiliki kumpulan class .disabled-group
.
Jika demikian, kartu akan berwarna abu-abu, dan tombol "Tambahkan" dicegah agar tidak
merespons klik dengan menyetel pointer-events
ke none
.
.plan-group-container:has(.disabled-group) {
opacity: 0.5;
filter: grayscale(100%);
}
.plan-group-container:has(.disabled-section) .button {
pointer-events: none;
border-color: #B5B5B5;
color: var(--text-primary-38-color);
background: var(--input-border-color);
}
Tim kesehatan di Policybazaar menerapkan kasus penggunaan yang sedikit berbeda. Mereka memiliki kuis inline untuk pengguna dan menggunakan
:has()
untuk memeriksa status kotak centang pertanyaan guna melihat apakah pertanyaan
telah dijawab. Jika ya, animasi akan diterapkan untuk beralih ke pertanyaan berikutnya.
Code
Pada contoh perbandingan paket, :has()
digunakan untuk memeriksa keberadaan
class. Anda juga dapat memeriksa status elemen input seperti kotak centang menggunakan
:has(input:checked)
. Dalam visual yang menampilkan kuis, setiap pertanyaan di
banner ungu adalah kotak centang. Policybazaar memeriksa apakah pertanyaan telah dijawab menggunakan :has(input:checked)
dan, jika ya, picu animasi menggunakan animation: quesSlideOut 0.3s 0.3s linear forwards
untuk bergeser ke pertanyaan berikutnya. Lihat cara kerjanya dalam kode berikut.
.segment_banner__wrap__questions {
position: relative;
animation: quesSlideIn 0.3s linear forwards;
}
.segment_banner__wrap__questions:has(input:checked) {
animation: quesSlideOut 0.3s 0.3s linear forwards;
}
@keyframes quesSlideIn {
from {
transform: translateX(50px);
opacity: 0;
}
to {
transform: translateX(0px);
opacity: 1;
}
}
@keyframes quesSlideOut {
from {
transform: translateX(0px);
opacity: 1;
}
to {
transform: translateX(-50px);
opacity: 0;
}
}
Tokopedia
Tokopedia menggunakan :has()
untuk membuat gambar overlay jika thumbnail produk
berisi video. Jika thumbnail produk berisi class .playIcon
, overlay CSS
akan ditambahkan. Di sini, pemilih :has() digunakan bersama dengan pemilih bertingkat &
dalam class .thumbnailWrapper
keseluruhan yang berlaku
untuk semua thumbnail. Cara ini akan membuat CSS lebih modular dan mudah dibaca.
Code
Kode berikut menggunakan
pemilih dan kombinator CSS
(&
dan >
) serta disusun bertingkat dengan :has()
untuk menata gaya thumbnail.
Untuk browser yang tidak mendukung, aturan class CSS tambahan reguler digunakan sebagai penggantian. Aturan @supports selector(:has(*))
juga digunakan untuk memeriksa dukungan browser.
Oleh karena itu, pengalaman pengguna secara keseluruhan tetap sama di seluruh versi browser.
export const thumbnailWrapper = css`
padding: 0;
margin-right: 7px;
border: none;
outline: none;
background: transparent;
> div {
width: 64px;
height: 64px;
overflow: hidden;
cursor: pointer;
border-color: ;
position: relative;
border: 2px solid ${NN0};
border-radius: 8px;
transition: border-color 0.25s;
&.active {
border-color: ${GN500};
}
@supports selector(:has(*)) {
&:has(.playIcon) {
&::after {
content: '';
display: block;
background: rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}
& > .playIcon {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
text-align: center;
z-index: 1;
}
}
`;
Hal-hal yang perlu dipertimbangkan saat menggunakan :has()
Gabungkan :has()
dengan pemilih lain untuk membuat kondisi yang lebih kompleks. Lihat
beberapa contoh di has() pemilih keluarga.
Referensi:
- Digabungkan oleh CSS 2023
- :has(): pemilih keluarga
- Demo :has()
- Apakah Anda ingin melaporkan bug atau meminta fitur baru? Kami ingin mendengar pendapat Anda.
Pelajari artikel lain dalam rangkaian ini yang membahas bagaimana perusahaan e-commerce mendapatkan manfaat dari penggunaan fitur CSS dan UI baru seperti animasi berbasis Scroll, transisi tampilan, popover, dan kueri container.