מספר מילים על התכונה 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 משנה את כללי המשחק עבור מפתחים ומאפשר יצירת עיצובים מורכבים ודינמיים יותר. על ידי הבנה ושימוש בסלקטור זה תוכלו ליצור עמודי אינטרנט אינטראקטיביים ו״מושכים״ יותר בקלות.