Έχω μια ετικέτα div
που περιέχει αρκετές ετικέτες ul
.
Μπορώ να ορίσω ιδιότητες CSS μόνο για την πρώτη ετικέτα ul
:
div ul:first-child {
background-color: #900;
}
Ωστόσο, οι ακόλουθες προσπάθειές μου να ορίσω ιδιότητες CSS για κάθε άλλη ετικέτα ul
εκτός από την πρώτη δεν λειτουργούν:
div ul:not:first-child {
background-color: #900;
}
div ul:not(:first-child) {
background-color: #900;
}
div ul:first-child:after {
background-color: #900;
}
Πώς μπορώ να γράψω στο CSS: "κάθε στοιχείο, εκτός από το πρώτο";
Μία από τις εκδόσεις που δημοσιεύσατε [λειτουργεί][1] για όλα τα σύγχρονα προγράμματα περιήγησης (όπου υποστηρίζονται οι επιλογείς CSS επιπέδου 3):
div ul:not(:first-child) {
background-color: #900;
}
Αν πρέπει να υποστηρίξετε παλαιότερους browsers, ή αν σας εμποδίζει ο περιορισμός του επιλογέα :not
(δέχεται μόνο έναν απλό επιλογέα ως όρισμα) τότε μπορείτε να χρησιμοποιήσετε μια άλλη τεχνική:
Ορίστε έναν κανόνα που έχει μεγαλύτερο πεδίο εφαρμογής από αυτό που σκοπεύετε και στη συνέχεια "ανακαλέστε" τον υπό όρους, περιορίζοντας το πεδίο εφαρμογής του σε αυτό που σκοπεύετε:
div ul {
background-color: #900; /* applies to every ul */
}
div ul:first-child {
background-color: transparent; /* limits the scope of the previous rule */
}
Κατά τον περιορισμό του πεδίου εφαρμογής χρησιμοποιήστε την προεπιλεγμένη τιμή για κάθε χαρακτηριστικό CSS που ορίζετε.
Αυτή η λύση CSS2 ("οποιοδήποτε ul
μετά από ένα άλλο ul
") λειτουργεί επίσης και υποστηρίζεται από περισσότερους φυλλομετρητές.
div ul + ul {
background-color: #900;
}
Σε αντίθεση με το :not
και το :nth-sibling
, ο επιλογέας adjacent sibling selector υποστηρίζεται από τον IE7+.
Αν έχετε JavaScript που αλλάζει αυτές τις ιδιότητες μετά τη φόρτωση της σελίδας, θα πρέπει να εξετάσετε κάποια γνωστά σφάλματα στις υλοποιήσεις του IE7 και IE8. Δείτε αυτόν τον σύνδεσμο.
Για οποιαδήποτε στατική ιστοσελίδα, αυτό θα πρέπει να λειτουργεί τέλεια.
Δεδομένου ότι το :not
δεν γίνεται αποδεκτό από την IE6-8, θα σας πρότεινα αυτό:
div ul:nth-child(n+2) {
background-color: #900;
}
Έτσι επιλέγετε κάθε ul
στο γονικό του στοιχείο εκτός από το πρώτο.
Ανατρέξτε στο άρθρο του Chris Coyer's "Useful :nth-child Recipes" για περισσότερα [παραδείγματα] nth-child.