מספר מילים על התכונה 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 – שאילתות על ה-DOM, בדיקת אלמנטים ילדים, והחלת עיצוב באופן תכנותי. כעת CSS מטפל בזה באופן מובנה, מה שאומר פחות event listeners וקוד פשוט יותר.

לצורך ההשוואה, כך ניתן להשיג את התוצאה של דוגמה מספר 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 מהיר בדפדפנים מודרניים, אבל סלקטורים לא ממוקדים כמו :has(img) ללא קידומת טיפוס מכריחים את הדפדפן לבדוק כל אלמנט בעמוד. עדיף להשתמש בסלקטורים ממוקדים כמו div:has(img) ולהשתמש ב-:has(> img) כשרוצים לטרגט רק צאצאים ישירים.

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

הפסאודו-קלאס :has נתמך בכל הדפדפנים המרכזיים החל מסוף 2023, עם כיסוי של כ-93% מהמשתמשים ברחבי העולם. Chrome 105+,‏ Firefox 121+,‏ Safari 15.4+ ו-Edge 105+ תומכים בו במלואו. ניתן להשתמש ב-CSS @supports עם @supports selector(:has(*)) לזיהוי תכונות במקרה שנדרש fallback.

שאלות נפוצות

סיכום

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