Terkadang diinginkan untuk menghapus margin atas atau kiri dari elemen pertama di wadah. Begitu juga dengan margin kanan atau bawah dari elemen terakhir dalam sebuah wadah. Anda dapat melakukan ini dengan menerapkan kelas ke HTML secara manual:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )The "top" / "bottom" zeroing berguna dengan tumpukan elemen vertikal, zeroing "left" / "right" berguna untuk baris horizontal (secara umum). Tapi… metode ini bergantung pada Anda menambahkan kelas ke HTML sendiri. Pseudo-selector bisa menjadi cara yang lebih baik dan tidak terlalu mengganggu:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Anda mungkin ingin mengganti * dengan penyeleksi yang lebih spesifik sesuai kebutuhan Anda.
"Setiap Ketiga", dll.
Katakanlah Anda memiliki blok mengambang yang terdiri dari 9 elemen, 3 oleh 3. Sangat umum bahwa Anda mungkin perlu menghapus margin kanan dari item ke-3, ke-6, dan ke-9. Pseudo-selector anak ke-n mungkin dapat membantu di sana:
* > :nth-child(3n+3) ( margin-right: 0; )Persamaan di sana, 3n + 3, bekerja seperti ini:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
dll.
jQuery
jQuery menggunakan pemilih CSS3, yang meliputi: first-child,: last-child, dan: nth-child (). Ini berarti bahwa di browser dengan tidak atau tidak sepenuhnya mendukung penyeleksi ini, mereka AKAN bekerja di jQuery, sehingga Anda dapat mengganti dukungan CSS dengan dukungan JavaScript. Sebagai contoh:
$("* > :nth-child(3n+3)").css("margin-right", 0);Dukungan browser
: first-child dan: last-child berfungsi di rilis terbaru dari semua browser utama, tetapi tidak di IE 6.: first-child didukung di IE 7+. : nth-child bekerja di Safari 3+, Firefox 3.5+, dan Chrome 1+, tetapi masih tidak berfungsi di IE8.
Lihat juga artikel David Oliver.