Ο :only-of-type
επιλογέας ψευδο-κλάσης στο CSS αντιπροσωπεύει οποιοδήποτε στοιχείο που δεν έχει αδέλφια του δεδομένου τύπου.
p:only-of-type ( color: red; )
Εάν καμία ετικέτα δεν προηγείται του επιλογέα, θα ταιριάζει με οποιαδήποτε ετικέτα (π.χ. :only-of-type
). Εάν προηγηθεί άλλος επιλογέας, θα ταιριάζει με βάση τον τύπο της ετικέτας που αντιστοιχεί στον επιλογέα. Για παράδειγμα, .example:only-of-type
θα συμπεριφέρεται σαν p:only-of-type
να .example
εφαρμόζεται σε ένα στοιχείο παραγράφου.
Απλό παράδειγμα
Μία λίστα περιέχει μόνο ένα στοιχείο λίστας. Μια άλλη λίστα περιέχει τρία στοιχεία λίστας. Μπορούμε να στοχεύσουμε το στοιχείο λίστας που είναι μόνο του :only-of-type
.
Δείτε αυτό το στυλό!
Αν και ίσως αυτό δεν είναι το καλύτερο παράδειγμα, γιατί :only-child
θα λειτουργούσε τόσο καλά εκεί, δεδομένου ότι τα στοιχεία λίστας είναι τα μόνα πιθανά παιδιά των λιστών. Αν χρησιμοποιούμε divs, θα μπορούσαμε να στοχεύσουμε μια παράγραφο μέσα σε ένα div αν είναι η μόνη παράγραφος, παρά το ότι υπάρχουν και άλλα στοιχεία εκεί.
Δείτε αυτό το στυλό!
Να σημειωθεί
Ως διασκεδαστικό μέρος, θα μπορούσατε να επιτύχετε την ίδια επιλογή όπως :only-of-type
με :first-of-type:last-of-type
ή :nth-of-type(1):nth-last-of-type(1)
. Αυτοί χρησιμοποιούν δύο αλυσοδεμένους επιλογείς, που σημαίνει ότι η ειδικότητα είναι διπλάσια από αυτήν :only-of-type
.
Υποστήριξη προγράμματος περιήγησης
Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
---|---|---|---|---|---|---|
Οποιος | Οποιος | Οποιος | Οποιος | IE9 + | Οποιος | Οποιος |