: μόνο παιδί - CSS-Κόλπα

Η :only-childιδιότητα επιλογέα ψευδο-κλάσης στο CSS αντιπροσωπεύει ένα στοιχείο που έχει ένα γονικό στοιχείο και του οποίου το γονικό στοιχείο δεν έχει κανένα άλλο στοιχείο. Αυτό θα ήταν το ίδιο με :first-child:last-childή :nth-child(1):nth-last-child(1), αλλά με χαμηλότερη ειδικότητα.

div p:only-child ( color: red; )

Για παράδειγμα, εάν τοποθετούμε παραγράφους σε ένα παρόμοιο έτσι…


This paragraph is the only child of its parent
This paragraph is the first child of its parent
This paragraph is the second child of its parent

Τώρα μπορούμε να σχεδιάσουμε το μόνο

του πρώτου παιδιού μας . Τα επόμενα και τα παιδιά του δεν θα διαμορφωθούν ποτέ, καθώς το γονικό κοντέινερ περιέχει περισσότερα από ένα παιδιά (δηλαδή τις ετικέτες p).

p:only-child ( color:red; )

Θα μπορούσαμε επίσης να συνδυάσουμε επιπλέον ψευδο-τάξεις όπως αυτό το παράδειγμα που επιλέγει την πρώτη παράγραφο στο ένθετο div μας και το μόνο παιδί του div.contain.


Hello World
some more children

div.contain div:only-child :first-child ( color: red; )

:only-childδεν θα λειτουργήσει ως επιλογέας εάν το γονικό στοιχείο περιέχει περισσότερα από ένα παιδιά με την ίδια ετικέτα. Για παράδειγμα…


paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2

div.contain div:only-child ( color: red; )

Αυτό δεν θα έχει ως αποτέλεσμα να κληρονομήσουν τα div με το κόκκινο χρώμα, καθώς ο γονέας περιέχει περισσότερα από 1 παιδιά (τα 3 ανώνυμα div)

Υποστήριξη προγράμματος περιήγησης

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.