מהפכת has ב-CSS: איך ביטלתי עשרות שורות JavaScript

has() ב-CSS: איך ביטלתי עשרות שורות JavaScript

כשבדקתי אתר של סוכנות עיצוב מתל אביב לפני שבועיים, ראיתי תופעה מוכרת.

כל הברקה עיצובית — מחידוד הגבולות של כרטיס מוצר כשמוסיפים לו תווית מבצע, ועד הכהיית הרקע כשהמשתמש מרחף מעל תפריט — הייתה קשורה בשרשרת של Event Listeners ב-JavaScript. הקוד סבל מסיבוכיות יתר. האתר היה כבד.

ב-2026 אין לזה שום הצדקה.

הסלקטור :has() ב-CSS שינה את חוקי המשחק בבניית ממשקים. הנה ההבדל בין הדרך הישנה והמסורבלת לדרך החדשה.

ה'לפני': כשכל שינוי קטן ב-UI דרש שורת JavaScript

בעבר, CSS ידע לרדת רק למטה בעץ ה-DOM. יכולת להגדיר מה קורה לילד כשהאב ב-hover, אבל לא להפך.

רוצים להדגיש טופס שלם ברגע שאחד השדות בפנים מכיל שגיאה? הייתם חייבים לקשר פונקציית JS שתנטר את השדות, תוסיף מחלקת has-error לאלמנט העטוף, ותסיר אותה במידת הצורך.

// הדרך הישנה והמעייפת
input.addEventListener('input', (e) => {
  const formGroup = e.target.closest('.form-group');
  if (!e.target.validity.valid) {
    formGroup.classList.add('has-error');
  } else {
    formGroup.classList.remove('has-error');
  }
});

זה עבד, אבל התשלום היה כבד:

• ערימת קוד מבוזרת שקשה לתחזק.
• עיכובים קטנים ברינדור בזמן הקלדה.
• תלות מוגזמת בפריימוורקים רק בשביל שינויי סטייל פשוטים.

ה'אחרי': ממשק נושם ודינמי שנשלט 100% ב-CSS

היום, הדפדפן עושה את העבודה הקשה ישירות במנוע הסטיילינג.

הגדרה · :has() Selector

סלקטור CSS שמכונה הסלקטור ההורה (Parent Selector). הוא מאפשר לבחור אלמנט הורה בהתאם לאלמנטים המוכלים בתוכו או למצבם הדינמי.

במקום לעקוב אחרי שינויים ב-DOM בעזרת סקריפטים, אנחנו מנסחים את הכלל ב-CSS בודד:

/* הדרך החדשה: אפס שורות קוד JS */
.form-group:has(input:invalid) {
  border-color: #ef4444;
  background-color: #fef2f2;
}

התוצאה מיידית. הממשק מגיב ברמת ה-Frame הבא של המעבד הגרפי, ללא תפיסת ה-Main Thread.

3 תרחישי UI שבהם :

has() משנה את המשחק

הנה שלוש דוגמאות שיישמתי השנה בפרויקטים ב-Just Better Site, שהסירו לחלוטין את הצורך בבלוקים של JavaScript:

1. כרטיסי מוצר דינמיים לפי תוכן

יש לכם כרטיס תוכן או מוצר. אם יש בתוכו תמונה, תרצו פריסה של שתי עמודות. אם אין תמונה — פריסה של עמודה אחת מרכזית.

.card:has(img) {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.5rem;
}

מבלי לשנות קלאסים ומבלי לבדוק ב-Server Render אם התמונה קיימת.

2. הדגשת כרטיסי תמחור נבחרים

כשהלקוח מסמן Radio Button בתוך כרטיס מחיר, תרצו להבליט את הכרטיס כולו, להוסיף לו צל מודגש ולשנות את צבע הרקע:

.pricing-card:has(input[type="radio"]:checked) {
  border: 2px solid #f97316;
  box-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.2);
  transform: translateY(-4px);
}

3. הכהיית השורה בטבלה בזמן ריחוף

כשהסמן נמצא על כפתור מסוים ברשימה, נרצה לסמן את כל השורה כקנדידטית למחיקה:

.table-row:has(.delete-btn:hover) {
  background-color: #fee2e2;
  opacity: 0.8;
}

השוואה בין השיטה הישנה לחדשה:

הביצועים והמהירות ב-2026

מנועי הדפדפנים ב-2026 עברו אופטימיזציה מטורפת עבור :has(). בעבר הייתה דאגה לגבי עלות חישוב ה-Restyling בדפים מורכבים מאוד, אך כיום הדפדפנים מבודדים את סריקת העץ בצורה חכמה.

מבחינת חוויית משתמש וציטוט במנועי AI: אתר שנטען מהר, ללא קפיצות תוכן (CLS) וללא השהיות קלט (INP גבוה), מקבל ציון איכות גבוה בהרבה.

💡

פחות JavaScript לניהול מצבי UI פירושו מדד INP נמוך יותר, טעינה נקייה יותר וחוויית משתמש חלקה בלי כתיבת קוד מיותר.

סיכום והמלצות פרקטיות

מעבר ל-:has() הוא לא רק עניין של קוד אלגנטי. זהו שינוי תפיסתי.

כשאתם מתכננים את הרכיב הבא שלכם:

• שאלו קודם: "האם הדפדפן יכול לדעת את זה לבד ב-CSS?"
• נקו את מחלקות ה-has-active, is-selected ו-has-error שהתרגלתם לפזר ב-JS.
• תנו ל-CSS לנהל את המצב הוויזואלי. השאירו את JavaScript ללוגיקה עסקית בלבד.