Ψευδοκλάση nth-of-type
Η ψευδοκλάση nth-of-type επιλέγει ένα στοιχείο,
που είναι ο n-οστός απόγονος συγκεκριμένου τύπου.
Δηλαδή, αν γράψω h2:nth-of-type(4)
- θα βρεθεί ο 4-τος h2 στον γονέα (σε
αντίθεση με το nth-child,
που θα βρει μόνο εκείνο το h2, που είναι
το 4-το στοιχείο στον γονέα).
Σύνταξη
cssεπιλογέας: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
στον γονέα:
html<div>
<h2>τίτλος</h2>
<p>παράγραφος</p>
<h2>τίτλος</h2>
<p>παράγραφος</p>
<h2>τίτλος</h2>
<p>παράγραφος</p>
</div>cssh2:nth-of-type(2) {
color: red;
}
Результат:
Παράδειγμα
Ας βρούμε όλα τα ζυγά h2:
html<div>
<h2>τίτλος</h2>
<p>παράγραφος</p>
<h2>τίτλος</h2>
<p>παράγραφος</p>
<h2>τίτλος</h2>
<p>παράγραφος</p>
<h2>τίτλος</h2>
<p>παράγραφος</p>
<h2>τίτλος</h2>
<p>παράγραφος</p>
</div>cssh2:nth-of-type(even) {
color: red;
}
Результат:
Παράδειγμα
Ας βρούμε όλα τα μονά h2:
html<div>
<h2>τίτλος</h2>
<p>παράγραφος</p>
<h2>τίτλος</h2>
<p>παράγραφος</p>
<h2>τίτλος</h2>
<p>παράγραφος</p>
<h2>τίτλος</h2>
<p>παράγραφος</p>
<h2>τίτλος</h2>
<p>παράγραφος</p>
</div>cssh2:nth-of-type(odd) {
color: red;
}
Результат: