Nurmukhamedoff

CSS is magic

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() funksiyasi
Bu 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

www.tg-me.com/tw/telegram/com.nurmukhamedoff_dev/1160

2.6K viewsedited  Sep 6, 2024 at 12:49

CSS is magic

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() funksiyasi
Bu 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

BY Nurmukhamedoff