Понякога може да е желателно да се премахне горното или лявото поле от първия елемент в контейнер. По същия начин, дясното или долното поле от последния елемент в контейнер. Можете да направите това чрез ръчно прилагане на класове към HTML:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )Нулирането „отгоре“ / „отдолу“ е полезно при вертикален набор от елементи, нулирането „отляво“ / „отдясно“ е полезно за хоризонтални редове (като цяло). Но ... този метод зависи от това дали вие сами добавяте класове към HTML. Псевдоселекторите могат да бъдат по-малко натрапчив начин:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Може да искате да замените * с по-специфични селектори според вашите нужди.
„Всеки трети“ и т.н.
Да предположим, че сте имали плаващ блок от 9 елемента, 3 на 3. Много често се случва да се наложи да премахнете десния полет от 3-ти, 6-ти и 9-и елементи. Псевдоселекторът от n-дете може да е в състояние да помогне там:
* > :nth-child(3n+3) ( margin-right: 0; )Уравнението там, 3n + 3, работи по следния начин:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
и т.н.
jQuery
jQuery използва CSS3 селектори, който включва: first-child,: last-child и: nth-child (). Това означава, че в браузъри, които не поддържат или не поддържат напълно тези селектори, те ЩЕ работят в jQuery, така че можете да замените CSS поддръжката с поддръжка на JavaScript. Например:
$("* > :nth-child(3n+3)").css("margin-right", 0);Поддръжка на браузър
: first-child и: last-child работи в последната версия от всички основни браузъри, но не и в IE 6.: first-child се поддържа в IE 7+. : nth-child работи в Safari 3+, Firefox 3.5+ и Chrome 1+, но все още не работи в IE8.
Вижте и статията на Дейвид Оливър.