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

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

Σύνταξη

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

Τιμές

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

Παράδειγμα

Ας βρούμε το h2 που είναι το 2-ο h2 στον γονέα από το τέλος:

<div>
	<h2>τίτλος</h2>
	<p>παράγραφος</p>
	
	<h2>τίτλος</h2>
	<p>παράγραφος</p>
	
	<h2>τίτλος</h2>
	<p>παράγραφος</p>
	
	<h2>τίτλος</h2>
	<p>παράγραφος</p>
	
	<h2>τίτλος</h2>
	<p>παράγραφος</p>
	
	<h2>τίτλος</h2>
	<p>παράγραφος</p>
	
	<h2>τίτλος</h2>
	<p>παράγραφος</p>
</div>

h2:nth-last-of-type(2) {
	color: red;
}

Παράδειγμα

Ας βρούμε όλους τους ζυγούς h2 από το τέλος:

<div>
	<h2>τίτλος</h2>
	<p>παράγραφος</p>
	
	<h2>τίτλος</h2>
	<p>παράγραφος</p>
	
	<h2>τίτλος</h2>
	<p>παράγραφος</p>
	
	<h2>τίτλος</h2>
	<p>παράγραφος</p>
	
	<h2>τίτλος</h2>
	<p>παράγραφος</p>
	
	<h2>τίτλος</h2>
	<p>παράγραφος</p>
	
	<h2>τίτλος</h2>
	<p>παράγραφος</p>
</div>

h2:nth-last-of-type(even) {
	color: red;
}

Παράδειγμα

Ας βρούμε όλους τους μονά h2 από το τέλος:

<div>
	<h2>τίτλος</h2>
	<p>παράγραφος</p>
	
	<h2>τίτλος</h2>
	<p>παράγραφος</p>
	
	<h2>τίτλος</h2>
	<p>παράγραφος</p>
	
	<h2>τίτλος</h2>
	<p>παράγραφος</p>
	
	<h2>τίτλος</h2>
	<p>παράγραφος</p>
	
	<h2>τίτλος</h2>
	<p>παράγραφος</p>
	
	<h2>τίτλος</h2>
	<p>παράγραφος</p>
</div>

h2:nth-last-of-type(odd) {
	color: red;
}