Bazen bir kaptaki ilk elemandan üst veya sol kenar boşluğunun kaldırılması istenebilir. Aynı şekilde, bir kaptaki son öğenin sağ veya alt kenar boşluğu. Bunu, sınıfları HTML'ye manuel olarak uygulayarak yapabilirsiniz:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )"Üst" / "alt" sıfırlama, dikey bir öğe yığınıyla kullanışlıdır, "sol" / "sağ" sıfırlama (genel olarak) yatay sıralar için yararlıdır. Ancak… bu yöntem, HTML’ye kendiniz sınıf eklemenize bağlıdır. Sözde seçiciler, daha az müdahaleci bir yol olabilir:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )* İhtiyaçlarınıza göre daha özel seçicilerle değiştirmek isteyebilirsiniz.
"Her Üçte Bir" vb.
Diyelim ki 3'e 3 olmak üzere 9 öğeden oluşan bir kayan blokunuz var. 3., 6. ve 9. öğelerden sağ marjı kaldırmanız çok yaygın bir durumdur. Nth-child sözde-seçici burada yardımcı olabilir:
* > :nth-child(3n+3) ( margin-right: 0; )Oradaki denklem, 3n + 3, şu şekilde çalışır:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
vb.
jQuery
jQuery, aşağıdakileri içeren CSS3 seçicilerini kullanır: birinci-çocuk,: son-çocuk ve: nth-çocuk (). Bu, bu seçicileri desteklemeyen veya tam olarak desteklemeyen tarayıcılarda jQuery'de çalışacakları anlamına gelir, böylece CSS desteğini JavaScript desteği ile değiştirebilirsiniz. Örneğin:
$("* > :nth-child(3n+3)").css("margin-right", 0);Tarayıcı desteği
: first-child ve: last-child, tüm büyük tarayıcılardan en son sürümde çalışır, ancak IE 6'da değildir.: first-child, IE 7+ sürümünde desteklenir. : nth-child, Safari 3+, Firefox 3.5+ ve Chrome 1+ ile çalışır, ancak yine de IE8'de çalışmaz.
Ayrıca David Oliver'ın makalesine bakın.