Ψευδοκλάση nth-last-child

Η ψευδοκλάση nth-last-child επιλέγει ένα στοιχείο που είναι το n-οστό παιδί του γονέα, μετρώντας από το τέλος. Συμπεριφέρεται παρόμοια με την nth-child, μόνο που η μέτρηση γίνεται από το τέλος.

Σύνταξη

επιλογέας:nth-last-child(αριθμός | odd | even | έκφραση) {
	
}

Τιμές

Τιμή	Περιγραφή
αριθμός	Θετικός αριθμός ξεκινώντας από το `1`. Ορίζει τον αριθμό του στοιχείου στο οποίο θέλουμε να απευθυνθούμε. Η αρίθμηση των στοιχείων ξεκινά από το `1`.
`odd`	Μονά στοιχεία.
`even`	Ζυγά στοιχεία.
έκφραση	Μπορούν να συντεθούν ειδικές εκφράσεις με το γράμμα n, που συμβολίζει όλους τους ακέραιους αριθμούς από το μηδέν (όχι από το ένα) ώς το άπειρο. Έτσι, το `2n` σημαίνει όλους τους ζυγούς αριθμούς (ξεκινώντας από τον δεύτερο). Πώς να το κατανοήσουμε; Αντικαθιστούμε στο `n` διαδοχικά αριθμούς από το `0` και πέρα: αν n = 0, τότε το 2n δίνει 0 - δεν υπάρχει τέτοιο στοιχείο (η αρίθμηση των στοιχείων ξεκινά από το 1), αν n = 1, τότε το 2n δίνει 2 - το δεύτερο στοιχείο, αν n = 2, το 2n δίνει 4 - το τέταρτο στοιχείο. Αν γραφτεί 3n - αυτό θα είναι κάθε τρίτο στοιχείο (ξεκινώντας από το τρίτο), και ούτω καθεξής.

Παράδειγμα

Σε αυτό το παράδειγμα, θα κάνουμε κόκκινο το χρώμα αυτού του li, που είναι το 4-οστό από το τέλος παιδί του γονέα του:

<ul>
	<li>στοιχείο λίστας</li>
	<li>στοιχείο λίστας</li>
	<li>στοιχείο λίστας</li>
	<li>στοιχείο λίστας</li>
	<li>στοιχείο λίστας</li>
</ul>

li:nth-last-child(4) {
	color: red;
}

Παράδειγμα

Τώρα θα κάνουμε κόκκινα όλα τα ζυγά από το τέλος li:

<ul>
	<li>στοιχείο λίστας</li>
	<li>στοιχείο λίστας</li>
	<li>στοιχείο λίστας</li>
	<li>στοιχείο λίστας</li>
	<li>στοιχείο λίστας</li>
</ul>

li:nth-last-child(even) {
	color: red;
}

Παράδειγμα

Τώρα θα κάνουμε κόκκινα όλα τα μονά από το τέλος li:

<ul>
	<li>στοιχείο λίστας</li>
	<li>στοιχείο λίστας</li>
	<li>στοιχείο λίστας</li>
	<li>στοιχείο λίστας</li>
	<li>στοιχείο λίστας</li>
</ul>

li:nth-last-child(odd) {
	color: red;
}

Παράδειγμα

Τώρα θα κάνουμε κόκκινο κάθε τρίτο από το τέλος li:

<ul>
	<li>στοιχείο λίστας</li>
	<li>στοιχείο λίστας</li>
	<li>στοιχείο λίστας</li>
	<li>στοιχείο λίστας</li>
	<li>στοιχείο λίστας</li>
</ul>

li:nth-last-child(3n) {
	color: red;
}