” στοιχείο, τότε μπορούμε να προσαρμόσουμε το στυλ του γονικού στοιχείου κρατώντας το παιδί. Για το σκοπό αυτό, μπορούμε να χρησιμοποιήσουμε το « :has() ” επιλογέας.

Από τα δύο στοιχεία '

', επιλέξτε αυτό που περιέχει το στοιχείο '

' χρησιμοποιώντας ' .class-name:has(child-name) ”:

.parent-div : έχει ( h1 ) {

χρώμα του φόντου : #103e6d ;

χρώμα : κοχύλι ;

πλάτος : 150 εικονοστοιχεία ;

ύψος : 150 εικονοστοιχεία ;

σύνορα-ακτίνα : πενήντα% ;

στοίχιση κειμένου : κέντρο ;

}

Εδώ, έχουμε εφαρμόσει τις ακόλουθες ιδιότητες CSS στο γονικό στοιχείο:

---

---

• ' χρώμα του φόντου ' χρησιμοποιείται για τον καθορισμό του χρώματος φόντου του στοιχείου.
• ' χρώμα ” καθορίζει το χρώμα κειμένου του στοιχείου.
• ' πλάτος ' χρησιμοποιείται για τον καθορισμό του πλάτους του στοιχείου.
• ' ύψος ” καθορίζει το ύψος του στοιχείου.
• ' σύνορα-ακτίνα Η ιδιότητα ' χρησιμοποιείται για τον ορισμό των στρογγυλεμένων γωνιών του στοιχείου.
• ' στοίχιση κειμένου ” καθορίζει τη στοίχιση κειμένου.

Παραγωγή

Πώς να επιλέξετε όλα τα παιδικά στοιχεία;

Για να επιλέξετε το θυγατρικό στοιχείο με τη βοήθεια του γονικού επιλογέα, ακολουθήστε το παράδειγμα που δίνεται.

Παράδειγμα

Ακολουθήστε τα παρακάτω βήματα για να δημιουργήσετε μια σελίδα HTML:

• Προσθέστε ένα στοιχείο div που περιέχει δύο '

  'ετικέτες και ένα '

  'ετικέτα που έχει την τάξη' παιδί-διβ '.
• Το παιδί ' div Το στοιχείο περιέχει ένα στοιχείο «

  »:

< div τάξη = 'parent-div' >

< Π > γεια < / Π >

< Π > κόσμος < / Π >

< div τάξη = 'child-div' >

< Π > είμαι παιδί div < / Π >

< / div >

< / div >

Μπορούμε να επιλέξουμε θυγατρικά στοιχεία μέσω του γονέα '

” τάξη. Αυτό δεν θα επιλέξει μόνο το άμεσο ' Π ' στοιχεία αλλά και επιλέγει το ένθετο ' Π » στοιχεία:

.parent-div Π {

χρώμα του φόντου : #7F167F ;

γραμματοσειρά-οικογένεια : ρέων ;

μέγεθος γραμματοσειράς : 25 εικονοστοιχεία ;

στοίχιση κειμένου : κέντρο ;

χρώμα : λευκός καπνός ;

}

Παραγωγή

Πώς να επιλέξετε όλα τα Direct Children Elements;

Για να επιλέξετε το άμεσο παιδί του γονικού div, μπορούμε να χρησιμοποιήσουμε το ' > σύμβολο '. Αυτό θα βοηθήσει στην επιλογή όλων των στοιχείων 'p' που είναι το άμεσο παιδί του γονέα '

'. Για παράδειγμα, έχουμε εφαρμόσει τις ακόλουθες ιδιότητες CSS:

.parent-div > Π {

χρώμα του φόντου : #7F167F ;

γραμματοσειρά-οικογένεια : ρέων ;

μέγεθος γραμματοσειράς : 30 εικονοστοιχεία ;

στοίχιση κειμένου : κέντρο ;

χρώμα : λευκός καπνός ;

}

Ο ' γραμματοσειρά-οικογένεια ' καθορίζει τη γραμματοσειρά του επιλεγμένου στοιχείου και ' μέγεθος γραμματοσειράς ' χρησιμοποιείται για τον καθορισμό του μεγέθους της γραμματοσειράς:

Παραγωγή

Έχουμε συζητήσει για τους γονικούς επιλογείς CSS σε HTML και CSS.

συμπέρασμα

Στο CSS, το ' :has() Ο επιλογέας χρησιμοποιείται ως ψευδο-κλάση γονικού επιλογέα. Χρησιμοποιείται ιδιαίτερα για την επιλογή γονικών στοιχείων. Για παράδειγμα, ' .parent-div:has(h1) ' επιλέγει το γονικό στοιχείο που έχει το '

” στοιχεία. Για να επιλέξετε το θυγατρικό στοιχείο του γονικού στοιχείου, χρησιμοποιήστε το ' .parent-div Σελ '. Η δήλωση συνθήκης μπορεί επίσης να χρησιμοποιηθεί για την επιλογή όλων των άμεσων θυγατρικών στοιχείων. Αυτό το άρθρο έχει εξηγήσει τον γονικό επιλογέα CSS με παραδείγματα.