Πseudo-elements CSS

Τι είναι ο ψευδοέлемент;

Οι ψευδοέлементοι CSS χρησιμοποιούνται για τη ρύθμιση του στυλ συγκεκριμένων τμημάτων του στοιχείου.

Παράδειγμα, μπορεί να χρησιμοποιηθεί για:

  • Ρύθμιση του στυλ της πρώτης γραμμής και της πρώτης γραμμής κειμένου του στοιχείου
  • Εισαγωγή περιεχομένου πριν ή μετά το περιεχόμενο του στοιχείου

Γραμματοσειρά

Γραμματοσειρά ψευδοελλειμμάτων:

selector::pseudo-element {
  property: value;
}

::first-line ψευδοέлемент

::first-line Οι ψευδοέлементοι χρησιμοποιούνται για την προσθήκη ειδικών στυλ στην πρώτη γραμμή κειμένου.

Το παρακάτω παράδειγμα προσθέτει στυλ στην πρώτη γραμμή κειμένου όλων των στοιχείων <p>:

Παράδειγμα

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Δοκιμάστε το προσωπικά

Σημείωση:::first-line Οι ψευδοέлементοι εφαρμόζονται μόνο σε στοιχεία block-level.

Οι παρακάτω αξιοθέατα εφαρμόζονται στους ψευδοέлементους ::first-line ψευδοέлемент:

  • Αξιοθέατα γραμματοσειράς
  • Αξιοθέατα χρώματος
  • Αξιοθέατα φόντου
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Παρακαλώ σημειώστεδιπλό διπλό τελεστώτος - ::first-line αντίθετα :first-line

Στα CSS3, το διπλό διπλό τελεστώτο αντικαθιστά τη γραμματοσειρά του μοναδικού διπλού τελεστώτος των ψευδοελλειμμάτων. Αυτό είναι μια προσπάθεια του W3C να διακρίνειψευδοκλάσηκαιΨευδοέлементΠροσπάθεια.

Στα CSS2 και CSS1, οι ψευδοκλάσεις και οι ψευδοέлементοι χρησιμοποιούν τη γραμματοσειρά του μοναδικού διπλού τελεστώτος.

Για λόγους συνεπαγόμενης συμβατότητας, οι ψευδοέлементοι CSS2 και CSS1 αποδέχονται τη γραμματοσειρά του μοναδικού διπλού τελεστώτος.

::first-letter ψευδοέлемент

::first-letter Οι ψευδοέлементοι χρησιμοποιούνται για την προσθήκη ειδικών στυλ στην πρώτη γραμμή κειμένου.

Το παρακάτω παράδειγμα ρυθμίζει τη μορφοποίηση της πρώτης γραμμής κειμένου όλων των στοιχείων <p>:

Παράδειγμα

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Δοκιμάστε το προσωπικά

Σημείωση:::first-letter Οι ψευδοέлементοι εφαρμόζονται μόνο σε στοιχεία block-level.

Οι παρακάτω αξιοθέατα εφαρμόζονται στον ψευδοέлемент ::first-letter:

  • Αξιοθέατα γραμματοσειράς
  • Αξιοθέατα χρώματος
  • Αξιοθέατα φόντου
  • Αξιοθέατα εξωτερικού περιθωρίου
  • Αξιοθέατα εσωτερικού περιθωρίου
  • Περιθώρια περιγράμματος
  • text-decoration
  • vertical-align (μόνο όταν "float" είναι "none")
  • text-transform
  • line-height
  • float
  • clear

Ψευδοεлементοί και κλάσεις CSS

Οι ψευδοεлементοί μπορούν να χρησιμοποιηθούν με κλάσεις CSS:

Παράδειγμα

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Δοκιμάστε το προσωπικά

Το παραπάνω παράδειγμα θα εμφανίσει την πρώτη γραφή της κλάσης "intro" με κόκκινο χρώμα και μεγαλύτερη γραμματοσειρά.

Πολλαπλοί ψευδοεлементοί

Μπορούν επίσης να συνδυαστούν πολλαπλοί ψευδοεлементοί.

Στο παρακάτω παράδειγμα, η πρώτη γραφή του παραγράφου θα είναι κόκκινη και η μεγέθυνση του γραμματοσειράς xx-large. Η υπόλοιπη γραμμή θα γίνει μπλε και θα χρησιμοποιηθεί μικρός κεφαλαίος. Το υπόλοιπο του παραγράφου θα είναι με προεπιλεγμένο μέγεθος γραμματοσειράς και χρώμα:

Παράδειγμα

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

Δοκιμάστε το προσωπικά

CSS - ψευδοεлемент ::before

::before Οι ψευδοεлементοί μπορούν να χρησιμοποιηθούν για την εισαγωγή περιεχομένου πριν από το περιεχόμενο του στοιχείου.

Το παρακάτω παράδειγμα εισάγει μια εικόνα πριν από το περιεχόμενο κάθε στοιχείου <h1>.

Παράδειγμα

h1::before {
  content: url(smiley.gif);
}

Δοκιμάστε το προσωπικά

CSS - ψευδοεлемент ::after

::after Οι ψευδοεлементοί μπορούν να χρησιμοποιηθούν για την εισαγωγή περιεχομένου μετά από το περιεχόμενο του στοιχείου.

Το παρακάτω παράδειγμα εισάγει μια εικόνα μετά από το περιεχόμενο κάθε στοιχείου <h1>.

Παράδειγμα

h1::after {
  content: url(smiley.gif);
}

Δοκιμάστε το προσωπικά

CSS - ψευδοεлемент ::selection

::selection ψευδοεлементοί που ταιριάζουν στο μέρος του στοιχείου που ο χρήστης επιλέγει.

Τα παρακάτω CSS αtributes μπορούν να εφαρμοστούν ::selection:

  • color
  • background
  • cursor
  • outline

Το παρακάτω παράδειγμα κάνει την επιλεγμένη κείμενη να εμφανίζεται με κόκκινο χρώμα σε κίτρινο φόντο:

Παράδειγμα

::selection {
  color: red; 
  background: yellow;
}

Δοκιμάστε το προσωπικά

Όλοι οι CSS ψευδοεлементοί

Επιλογέας Παράδειγμα Περιγραφή παραδείγματος
::after p::after Εισάγετε περιεχόμενο μετά από κάθε στοιχείο <p>.
::before p::before Εισάγετε περιεχόμενο πριν από κάθε στοιχείο <p>.
::first-letter p::first-letter Επιλέξτε την πρώτη γραφή κάθε στοιχείου <p>.
::first-line p::first-line Επιλέξτε την πρώτη γραμμή κάθε στοιχείου <p>.
::selection p::selection Επιλέγει το μέρος του στοιχείου που έχει επιλεγεί από τον χρήστη.

Όλες οι CSS ψευδοκλάσεις

Επιλογέας Παράδειγμα Περιγραφή παραδείγματος
:active a:active Επιλέγει κάθε σύνδεσμο που είναι ενεργός.
:checked input:checked Επιλέγει κάθε στοιχείο <input> που είναι επιλεγμένο.
:disabled input:disabled Επιλέγει κάθε στοιχείο <input> που είναι απενεργοποιημένο.
:empty p:empty Επιλέγει κάθε στοιχείο <p> που δεν έχει γιους.
:enabled input:enabled Επιλέγει κάθε στοιχείο <input> που είναι ενεργό.
:first-child p:first-child Επιλέγει κάθε στοιχείο <p> που είναι ο πρώτος γιός του γονέα του.
:first-of-type p:first-of-type Επιλέγει κάθε στοιχείο <p> που είναι ο πρώτος γιός του γονέα του.
:focus input:focus Επιλέγει κάθε στοιχείο <input> που έχει προσοχή.
:hover a:hover Επιλέγει κάθε σύνδεσμο που βρίσκεται στο ποντίκι.
:in-range input:in-range Επιλέγει κάθε στοιχείο <input> που έχει τιμή εντός του καθορισμένου ορίου.
:invalid input:invalid Επιλέγει κάθε στοιχείο <input> που έχει μη έγκυρη τιμή.
:lang(language) p:lang(it) Επιλέγει κάθε στοιχείο <p> που έχει τιμή του χαρακτηριστικού lang που ξεκινάει με "it".
:last-child p:last-child Επιλέγει κάθε στοιχείο <p> που είναι ο τελευταίος γιός του γονέα του.
:last-of-type p:last-of-type Επιλέγει κάθε στοιχείο <p> που είναι ο τελευταίος γιός του γονέα του.
:link a:link Επιλέγει κάθε σύνδεσμο που δεν έχει επισκεφθεί.
:not(selector) :not(p) Επιλέγει κάθε στοιχείο που δεν είναι <p>.
:ath-child(n) p:ath-child(2) Επιλέγει κάθε στοιχείο <p> που είναι ο δεύτερος γιός του γονέα του.
:ath-last-child(n) p:ath-last-child(2) Επιλέγει κάθε στοιχείο <p> που είναι ο δεύτερος γιός του γονέα του από τον τελευταίο γιο.
:ath-last-of-type(n) p:ath-last-of-type(2) Select each <p> element that is the second child of its parent, counting from the last child.
:nth-of-type(n) p:nth-of-type(2) Select each <p> element that is the second <p> element of its parent.
:only-of-type p:only-of-type Select each <p> element that is the only <p> element of its parent.
:only-child p:only-child Select <p> elements that are the only child of their parent.
:optional input:optional Select <input> elements without the 'required' attribute.
:out-of-range input:out-of-range Select <input> elements with values outside the specified range.
:read-only input:read-only Select <input> elements that have specified the 'readonly' attribute.
:read-write input:read-write Select <input> elements without the 'readonly' attribute.
:required input:required Select <input> elements that have specified the 'required' attribute.
:root root Select the root element of the element.
:target #news:target Select the current active #news element (click on the URL containing the anchor name).
:valid input:valid Select all <input> elements with valid values.
:visited a:visited Select all visited links.