:has() אינו סלקטור הורה. הוא מוחק את ה-JavaScript.
חפשו בקוד שלכם את classList.toggle.
סביר להניח שתמצאו מקרים רבים של אותו דפוס. משתמש לוחץ על תיבת סימון (checkbox) או מתמקד בשדה. אתם משתמשים ב-JavaScript כדי להחליף (toggle) מחלקה (class) על אלמנט הורה. זה מאפשר ל-CSS לעצב את ההורה.
אתם יכולים למחוק את רוב הקוד הזה.
אנשים מכנים את :has() "סלקטור ההורה". התיוג הזה שגוי. :has() בודק תנאי. הוא בוחן את התוכן של אלמנט כדי להחליט אם להחיל עיצוב מסוים.
הוא יכול לבדוק:
- אלמנט צאצא
- אח (sibling) ספציפי
- כמות פריטים
- היעדרות של אלמנט
הנה כמה דוגמאות:
• עיצוב כרטיס אם הוא מכיל תמונה:
.card:has(img) { ... }
• עיצוב שורה כאשר תיבת סימון מסומנת:
.option-row:has(input:checked) { background: var(--selected-bg); }
• שינוי פריסת גריד (grid layout) בהתבסס על כמות פריטים:
.grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
הדוגמה האחרונה משנה פריסה באמצעות CSS טהור. היא קוראת את המצב החי של ה-DOM.
בעבר, הייתם צריכים להשתמש ב-JavaScript כ"שליח". צאצא לא יכול היה להפעיל עיצובים על אב (ancestor). הייתם צריכים לכתוב מאזין (listener) כדי להעביר מחלקה במעלה העץ.
עכשיו, השליח נעלם.
אם תשתמשו ב-:has(), העיצובים שלכם תמיד יהיו נכונים. הם עובדים כבר ברינדור (render) הראשון. הם עובדים כאשר משתמש חוזר אחורה בדפדפן שלו. אין עיכוב בין שינוי המצב לבין שינוי העיצוב.
השתמשו בו עבור:
- וולידציה של טפסים (Form validation)
- מצבי ריק (empty states) ברשימות
- פאנלים הניתנים להחלפה (toggleable)
שימו לב של-:has() יש מחיר. הדפדפן חייב להעריך את הסלקטור הפנימי מול הצאצאים. עבור רוב משימות ממשק המשתמש (UI) כמו וולידציה או toggles, לא תבחינו בהבדל.
הימנעו משימוש בו עבור שינויים בתדירות גבוהה, כמו מיקומי גלילה (scroll positions) או אלפי מצבי ריחוף (hover states).
הפסיקו לבצע toggle למחלקות רק כדי להפעיל עיצובים מצאצא. שאלו אם :has() יכול לבטא את התנאי הזה במקום זאת. ה-CSS שלכם יתכווץ וה-JavaScript שלכם ייעלם.
:has() עובד ב-Chrome, Firefox, Safari, ו-Edge.
מקור: https://dev.to/parsajiravand/has-isnt-a-parent-selector-it-deletes-javascript-4hej