Το ::first-lineψευδο-στοιχείο είναι για την εφαρμογή στυλ στην πρώτη γραμμή ενός στοιχείου. Φανταστείτε μια παράγραφο που έχει πολλές γραμμές (όπως αυτή!). ::first-lineσας επιτρέπει να διαμορφώσετε την πρώτη γραμμή κειμένου. Θα μπορούσατε να το χρησιμοποιήσετε για να το κάνετε μεγαλύτερο ή να το βάλετε σε μικρά καπάκια ως στιλιστική επιλογή. Η ποσότητα του κειμένου που στοχεύει αυτό το ψευδο-στοιχείο εξαρτάται από τους διάφορους παράγοντες όπως το μήκος γραμμής, το πλάτος της θύρας, το μέγεθος της γραμματοσειράς, το διάστιχο, το διάστιχο. Μόλις η γραμμή σπάσει, το κείμενο μετά από αυτό δεν επιλέγεται πλέον. Σημειώστε ότι δεν υπάρχει πραγματικό στοιχείο DOM εδώ (έτσι "ψευδο" στοιχείο).
Αυτό το ψευδο-στοιχείο λειτουργεί μόνο σε στοιχεία επιπέδου μπλοκ (όταν displayέχει οριστεί είτε block, inline-block, table-caption, table-cell). Εάν έχει ρυθμιστεί σε ένα ενσωματωμένο στοιχείο, δεν συμβαίνει τίποτα, ακόμη και αν αυτό το ενσωματωμένο στοιχείο έχει μια αλλαγή γραμμής μέσα σε αυτό.
Σημειώστε επίσης ότι δεν μπορούν να χρησιμοποιηθούν όλες οι ιδιότητες σε ένα σύνολο κανόνων που περιέχει ::first-line. Ως επί το πλείστον:
.element::first-line ( font-style:… font-variant:… font-weight:… font-size:… font-family:… line-height:… color:… word-spacing:… letter-spacing:… text-decoration:… text-transform:… background-color:… background-image:… background-position:… background-repeat:… background-size:… background-attachment:… )Η επίσημη προδιαγραφή CSS λέει ότι οι πράκτορες χρηστών μπορούν να επιτρέψουν άλλες ιδιότητες εάν το επιθυμούν:
Τα UA μπορούν να εφαρμόσουν και άλλες ιδιότητες.
Μια λέξη σχετικά με την ειδικότητα
Η παρακάτω επίδειξη δείχνει πώς ::first-lineμπορεί να παρακάμψει κάθε είδους ειδικότητα, ακόμη και !important.
- Ο 1ος παραγράφος έχει ρυθμιστεί σε γκρι μέσω ενός επιλογέα ετικετών
- Ο 2ος παραγράφος ρυθμίζεται σε γκρι μέσω ενός επιλογέα τάξης
- Ο 3ος παραγράφος ρυθμίζεται σε γκρι μέσω ενός επιλογέα ταυτότητας
- Ο 4ος παραγράφος έχει ρυθμιστεί σε γκρι χρώμα μέσω ενός σημαντικού bash
Αυτό συμβαίνει επειδή το ψευδο-στοιχείο αντιμετωπίζεται σαν θυγατρικό στοιχείο και όχι μόνο μέρος του γονικού στοιχείου. Έτσι, οι κανόνες που εφαρμόζετε σε αυτό είναι μόνο για αυτόν, οι γονικοί κανόνες μπορεί να πέφτουν σε αυτόν.
Επίσης, δοκιμάστε να αλλάξετε το μέγεθος του προγράμματος περιήγησής σας για να δείτε πώς συμπεριφέρεται το ψευδο-στοιχείο όταν αλλάζει το πλάτος της θύρας προβολής.
Δεν υπάρχει: τελευταία γραμμή ή: nth-line, παρόλο που θα ήταν δροσερό.
Υποστήριξη προγράμματος περιήγησης
| Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
|---|---|---|---|---|---|---|
| Ναι | Ναι | Ναι | 3,5+ (παλιά) 9+ | 5.5+ (παλιά) 9+ | Ναι | Ναι |
Δεδομένου ότι ::first-lineείναι ένα ψευδο-στοιχείο, θα πρέπει να προθετείται από δύο άνω και κάτω τελεία, όπως ορίζεται στο CSS2.1. Ωστόσο, ορισμένα προγράμματα περιήγησης υποστηρίζουν μόνο τη σύνταξη μονής άνω τελείας (Internet Explorer 5.5 - 9 και Opera 3.5 - 9).