Ο ψευδο-κλάσος nth-child

Ο ψευδο-κλάσος nth-child επιλέγει ένα στοιχείο, που είναι το n-οστό παιδί του γονέα.

Σύνταξη

επιλογέας:nth-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-child(4) {
	color: red;
}

Παράδειγμα

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

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

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

Παράδειγμα

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

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

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

Παράδειγμα

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

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

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

Παράδειγμα

Στον επιλογέα μπορείτε να ορίσετε μια περιοχή στοιχείων. Ας πούμε, έχετε μια λίστα από 20 στοιχεία και πρέπει να επιλέξετε τα στοιχεία από το 7 έως το 14 συμπεριλαμβανομένων. Αυτό μπορεί να γίνει έτσι:

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

li:nth-child(n+7):nth-child(-n+14) {
	color: red;
}