Ο επιλογέας has
Ο επιλογέας :has επιλέγει στοιχεία,
που περιέχουν τουλάχιστον ένα στοιχείο
σύμφωνα με έναν δεδομένο επιλογέα, όχι απαραίτητα
άμεσο απόγονό.
Εφόσον το :has δεν ανήκει στις προδιαγραφές CSS,
για βελτίωση της απόδοσης σε σύγχρονα
προγράμματα περιήγησης είναι προτιμότερο να χρησιμοποιείται η
$("τον css-επιλογέα σας").has(επιλογέα/DOM στοιχείο).
Σύνταξη
Έτσι επιλέγουμε στοιχεία:
javascript$(':has(επιλογέας)');
Έτσι επιλέγουμε στοιχεία, εάν απαιτείται άμεση ένθεση του επιλογέα:
javascript$(':has(>επιλογέας)');
Παράδειγμα
Ας επιλέξουμε μόνο τις παραγράφους που έχουν μέσα τους
την ετικέτα b και
να βάλουμε στο τέλος τους το κείμενο '!!!':
html<p>κείμενο</p>
<p>κείμενο</p>
<p><b>έντονο</b> κείμενο</p>
<p><b>έντονο</b> κείμενο</p>javascript$('p:has(b)').append('!!!');
Ο κώδικας HTML θα γίνει ως εξής:
html<p>κείμενο</p>
<p>κείμενο</p>
<p><b>έντονο</b> κείμενο!!!</p>
<p><b>έντονο</b> κείμενο!!!</p>