מספר מילים על התכונה :has ב-CSS

הפסאודו-קלאס :has ב-CSS הוא סלקטור מאד עוצמתי שהוצג בCSS Selectors Level 4. סלקטור זה מאפשר למפתחים להחיל עיצוב (CSS) על אלמנט בהתבסס על ננוכחות של צאצאיו או של אלמנטים קשורים אחרים, תכונה שנדרשה זמן רב ב-CSS יש לציין.

מהו מאפיין :has?

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

תחביר – Syntax

התחביר הבסיסי של הפסאודו-קלאס :has הוא:

element:has(selector) {
    /* styles */
}

בתחביר זה, element מייצג את אלמנט ההורה, ו-selector מייצג את האלמנטים הילדים או הצאצאים שנבדקים.

דוגמאות מעשיות

ניתן מבט בכמה דוגמאות מעשיות בכדי להבין כיצד עובד הסלקטור :has:

דוגמה 1: הדגשת אלמנט אב בהתבסס על Child Element

נניח שאנחנו רוצים להדגיש div כלשהו במידה והוא מכיל אלמנט מסוג img. נוכל לעשות זאת באופן הבא:

<div>
    <p>This div contains an image.</p>
    <img src="https://via.placeholder.com/150" alt="Placeholder Image">
</div>
<div>
    <p>This div does not contain an image.</p>
</div>

div:has(img) {
    border: 2px solid green;
    padding: 10px;
}

דוגמה 2: עיצוב אלמנט הורה של פריט רשימה בהתבסס על אלמנט ילד

אם נרצה לעצב אלמנט מסוג ul בצורה שונה כאשר הוא מכיל אלמנט li עם מחלקה (class) ספציפית, נוכל להשתמש בסלקטור :hasבאופן הבא:

<ul>
    <li>Item 1</li>
    <li class="highlight">Item 2</li>
    <li>Item 3</li>
</ul>
<ul>
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
</ul>

ul:has(li.highlight) {
    background-color: lightyellow;
    padding: 10px;
}

דוגמה 3: עיצוב אימות טפסים

נוכל גם להשתמש בפסאודו-קלאס :has עבור אימות טפסים. לדוגמה, בכדי לעצב את div האב של input במידה וה input אינו חוקי נשתמש ב CSS הבא:

<form>
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" required>
    </div>
    <button type="submit">Submit</button>
</form>

.form-group:has(input:invalid) {
    border: 2px solid red;
    padding: 10px;
}

השוואה עם JavaScript

בכדי להשיג אפקטים דומים לפסאודו-קלאס :has בעבר היה צורך להשתמש ב-JavaScript. לדוגמה, בדיקת נוכחות של Child Element ולאחר מכן החלת העיצוב דינמית. בעוד ש-JavaScript מספקת גמישות, השימוש ב-CSS למשימות כאלה יכול להיות יעיל יותר ולהפחית את מורכבות הקוד.

לצורך ההשוואה, כך ניתן להשיג את התוצאה של דוגמה מספר 1 באמצעות JavaScript:

document.addEventListener("DOMContentLoaded", function() {
    const divs = document.querySelectorAll('div');

    divs.forEach(div => {
        if (div.querySelector('img')) {
            div.style.border = '2px solid green';
            div.style.padding = '10px';
        }
    });
});

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

תמיכה בדפדפנים

נכון לעכשיו, הפסאודו-קלאס :has עדיין לא נתמך בכל הדפדפנים. חשוב לבדוק את תאימות הדפדפנים הנוכחית ולשקול שימוש ב Polyfills עבור דפדפנים שלא תומכים בסלקטור זה.

סיכום

ניתן לומר שהפסאודו-קלאס :has ב-CSS משנה את כללי המשחק עבור מפתחים ומאפשר יצירת עיצובים מורכבים ודינמיים יותר. על ידי הבנה ושימוש בסלקטור זה תוכלו ליצור עמודי אינטרנט אינטראקטיביים ו״מושכים״ יותר בקלות.