Ψευδοκλάδος :nth-last-of-type() CSS

Ορισμός και χρήση

CSS :nth-last-of-type(n) οι ψευδοκλάδοι ταιριάζουν με τα στοιχεία που είναι ως προς τον γονικό στοιχείο ως συγκεκριμένο τύπο από την άκρη. n στοιχεία του υποστοιχείου.

n μπορεί να είναι ένας αριθμός/κατάλογος, μια λέξη-κλειδί (odd ή even) ή μια συνάρτηση (όπως an + b).

Συμβουλή:Επισκόπηση :nth-last-child() οι ψευδοκλάδοι επιλέγουν τα στοιχεία που είναι ως προς τον γονικό στοιχείο ως ακέραιος αριθμός από την άκρη. n στοιχεία του υποστοιχείου, ανεξάρτητα από τον τύπο τους.

Παράδειγμα

Παράδειγμα 1

Καθορίζουμε το χρώμα παρασκηνίου για κάθε στοιχείο <p> που είναι το δεύτερο από την άκρη ως προς τον γονικό στοιχείο.

Επιπλέον, καθορίζουμε το χρώμα παρασκηνίου για κάθε στοιχείο <li> που είναι το τρίτο από την άκρη ως προς τον γονικό στοιχείο.

p:nth-last-of-type(2) {
  χρώμα παρασκηνίου: κόκκινο;
}
li:nth-last-of-type(3) {
χρώμα παρασκηνίου: κίτρινο;
}

Δοκιμάστε το شخصικά

Παράδειγμα 2

odd και even είναι λέξη-κλειδί που μπορεί να χρησιμοποιηθεί για να ταιριάζει με τα στοιχεία που έχουν αριθμητική κατάταξη奇 ή偶 (η αριθμητική κατάταξη του πρώτου στοιχείου είναι 1).

Εδώ, καθορίζουμε διαφορετικά χρώματα παρασκηνίου για τα στοιχεία <p> με αριθμητική κατάταξη奇 και偶.

p:nth-last-of-type(odd) {
  χρώμα παρασκηνίου: κόκκινο;
}
p:nth-last-of-type(even) {
  χρώμα παρασκηνίου: μπλε;
}

Δοκιμάστε το شخصικά

Παράδειγμα 3

Χρησιμοποιώντας τη συνάρτηση (an + b). Περιγραφή: a είναι ο ακέραιος βήμας, n είναι όλα τα μηδενικά ακέραια από 0 και μετά, b είναι ο ακέραιος μετατόπιση.

Εδώ, καθορίζουμε το χρώμα παρασκηνίου για όλα τα στοιχεία <p> και <li> με αριθμητική κατάταξη 3 ως ακέραιος.

p:nth-last-of-type(3n) {
  χρώμα παρασκηνίου: κόκκινο;
}
li:nth-last-of-type(3n) {
  χρώμα παρασκηνίου: κίτρινο;
}

Δοκιμάστε το شخصικά

Γλώσσα CSS

:nth-last-of-type(index | odd | even | an+b) {
  κατατάξεις css;
}

Τεχνικά λεπτομέρειες

Υποστήριξη περιηγητή

Τα αριθμήματα στη τάβλη αναφέρονται στην πρώτη έκδοση του περιηγητή που υποστηρίζει πλήρως τον ψευδοκλάδο.