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

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

Δηλαδή, αν γράψω h2:nth-of-type(4) - θα βρεθεί ο 4-τος h2 στον γονέα (σε αντίθεση με το nth-child, που θα βρει μόνο εκείνο το h2, που είναι το 4-το στοιχείο στον γονέα).

Σύνταξη

επιλογέας:nth-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>
</div>

h2:nth-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>
</div>

h2:nth-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>
</div>

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