Men yaqinda narxlarni ko'rsatish bilan bog'liq bir kichik o'zgarish qildim.
Maqsad: agar straight-cash-discount bo'lsa, compare-price degan classni ko'rsatmaslik kerak edi (compare-price straight cashda avval keladi).
Avval buni Js da tezdagina bitirib qo'ygim keldi lekin CSS da buni iloji bo'lishi kerak deb biroz izlandim va topdim.
CSS :has() funksiyasiBu funksiya bizga JavaScript-siz dinamik stillarni qo'llash imkonini beradi!
:has() nima?
Bu CSS pseudo-sinfi bo'lib, elementlarni ularning ichidagi yoki keyingi elementlarga qarab tanlash imkonini beradi.
element:has(selector) {}
Shunda menda quyidagi kod ishladi,
.compare_price:has(~ .straight-discount-price:not(:empty)) {
display: none;
}
🤔 Nima uchun JavaScript emas, CSS?
Tezlik: CSS brauzerda tezroq ishlaydi shu sabab shunga o'xshash UI ga aloqador muammolarga yechimni iloji boricha CSS da berishda harakat qilaman.
Xullas, CSS is magic :).
@nurmukhamedoff_dev