Κατανόηση του Επιλογέα CSS :nth-child().

Όπως όλοι οι επιλογείς CSS, μπορείτε να χρησιμοποιήσετε το :nth-child() για να αναγνωρίσετε στοιχεία σε μια ιστοσελίδα και να εφαρμόσετε στυλ σε αυτά. Αλλά αυτός ο επιλογέας σάς επιτρέπει να περιορίσετε ένα σύνολο αδερφών με βάση τη σχετική θέση τους.

Ο επιλογέας υποστηρίζει ορισμένες βασικές λέξεις-κλειδιά για συνηθισμένες περιπτώσεις, αλλά παρέχει επίσης μια ισχυρή σύνταξη αντιστοίχισης προτύπων. Χρησιμοποιώντας το, μπορείτε να επιλέξετε στοιχεία με βάση τακτικά, επαναλαμβανόμενα μοτίβα ή πιο σύνθετους ορισμούς, με βάση τις ανάγκες σας.

Η σύνταξη του επιλογέα :nth-child().

Σαν Επιλογέας ψευδο-κλάσης CSS, η σύνταξη :nth-child() διαφέρει από άλλους επιλογείς. Λαμβάνει ένα όρισμα ως πρότυπο για την αντιστοίχιση στοιχείων σε ένα σύνολο αδελφών:

:nth-child(args) {
/*...*/
}

Η κύρια εστίαση είναι στα επιχειρήματα στις παρενθέσεις. Αυτά τα ορίσματα ορίζουν το υποσύνολο των στοιχείων προς επιλογή.

Χρήση τιμών λέξεων-κλειδιών για κοινές περιπτώσεις

Αυτός ο επιλογέας μπορεί να φιλοξενήσει δύο τιμές λέξεων-κλειδιών: Περιττός και ακόμη και. Είναι ιδιαίτερα χρήσιμα για styling εναλλακτικές σειρές σε έναν πίνακα.

Μια απλή ταξινομημένη λίστα είναι ένα άλλο καλό παράδειγμα για το πότε μπορείτε να χρησιμοποιήσετε αυτές τις τιμές λέξεων-κλειδιών:

<ol>
<li>Item 1li>
<li>Item 2li>
<li>Item 3li>
<li>Item 4li>
<li>Item 5li>
<li>Item 6li>
<li>Item 7li>
ol>

Χρησιμοποιώντας την :nth-child (μονό) επιλογέα, μπορείτε να αλλάξετε το χρώμα κάθε εναλλακτικού στοιχείου:

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

Τα στοιχεία ξεκινούν από το ευρετήριο 1, οπότε το πρώτο στοιχείο θα εμφανίζεται κόκκινο, μετά το τρίτο και ούτω καθεξής:

Λειτουργική σημείωση για περισσότερη ευελιξία

Μπορείτε να χρησιμοποιήσετε έναν μόνο ακέραιο για να επιλέξετε ένα μεμονωμένο στοιχείο, όπως αυτό:

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

Σε αυτήν την περίπτωση, ο επιλογέας ταιριάζει μόνο με το τέταρτο στοιχείο στη λίστα:

Αυτή η σύνταξη είναι μια ειδική περίπτωση της γενικότερης λειτουργικής σύνταξης που επιλέγει στοιχεία που ταιριάζουν με ένα δεδομένο μοτίβο. Αυτή η σύνταξη είναι:

:nth-child(An+B) {
/*...*/
}

Σε αυτή τη σημειογραφία, ΕΝΑ είναι το μέγεθος του βήματος. Αυτό σημαίνει πόσες φορές μετακινείται ο επιλογέας για να επιλέξει το επόμενο στοιχείο. Σας επιτρέπει να επιλέξετε κάθε άλλο στοιχείο, κάθε τρίτο στοιχείο κ.λπ. σι είναι το σημείο εκκίνησης όπου ξεκινά η επιλογή.

Για παράδειγμα, πάρτε το όρισμα 3n+1:

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

Αυτό θα ξεκινήσει την επιλογή από το πρώτο στοιχείο και θα συνεχίσει με κάθε τρίτο στοιχείο μετά από αυτό:

Συγκρίνετε αυτό με την έκφραση 3n+2:

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

Αυτό εξακολουθεί να επιλέγει κάθε τρίτο στοιχείο, αλλά τώρα ξεκινά από το δεύτερο στοιχείο στη λίστα:

Ένα άλλο ενδιαφέρον παράδειγμα είναι το :nth-child (n+3):

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

Αυτό θα επιλέξει κάθε στοιχείο (n), ξεκινώντας από το τρίτο (+3). Θα μοιάζει με αυτό:

Μπορείτε επίσης να χρησιμοποιήσετε την αφαίρεση για να επιτύχετε ορισμένα αποτελέσματα:

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

Αυτό το παράδειγμα εξακολουθεί να επιλέγει κάθε τρίτο στοιχείο, αλλά ξεκινά από το "πρώτο μείον". Στην πραγματικότητα, αυτό σημαίνει ότι θα επιλέξει το δεύτερο στοιχείο στη λίστα, μετά το πέμπτο και ούτω καθεξής:

Το του Σύνταξη

Μπορείτε επίσης να χρησιμοποιήσετε τη λέξη-κλειδί του ακολουθούμενο από α εκλέκτορας ως όρισμα στον επιλογέα :nth-child(). Αυτή η σύνταξη σάς επιτρέπει να περιορίσετε τα πιθανά στοιχεία από τα οποία επιλέγει το κανονικό μοτίβο.

Για παράδειγμα, φανταστείτε ότι η σήμανση είναι πιο περίπλοκη από την αρχική:

<ol>
<liclass="old">Item 1li>
<liclass="new">Item 2li>
<liclass="new">Item 3li>
<liclass="old">Item 4li>
<liclass="new">Item 5li>
<liclass="new">Item 6li>
<liclass="new">Item 7li>
ol>

Τώρα, χρησιμοποιήστε το :nth-child για να επιλέξετε τα ζυγά στοιχεία από το σύνολο αυτών με μια συγκεκριμένη κατηγορία:

.new {
font-weight: bold;
}
li:nth-child(evenof.new) {
color: red;
}

Παρατηρήστε πώς μόνο τα έντονα στοιχεία με ζυγούς αριθμούς είναι κόκκινα:

Εξετάστε επίσης πώς αυτό διαφέρει από li.new: nth-child (ακόμα) που στοχεύει .νέα στοιχεία, αλλά μόνο αν είναι άρτια. Αυτά θα ήταν τα στοιχεία 2 και 6 στο παραπάνω παράδειγμα.

Εργασία με τον επιλογέα :nth-child().

Μπορείτε να επιτύχετε μοναδικά σχέδια χρησιμοποιώντας τον επιλογέα :nth-child(). Μπορείτε να δημιουργήσετε πολύχρωμους ιστότοπους και να επισημάνετε σειρές και στήλες σε πίνακες δεδομένων. Ο συνδυασμός του με άλλους επιλογείς CSS θα σας βοηθήσει να δημιουργήσετε πολύπλοκες διατάξεις και σχέδια.