Іноді може бути бажано видалити верхнє або ліве поле з першого елемента в контейнері. Аналогічним чином, право або нижнє поле від останнього елемента в контейнері. Це можна зробити, застосувавши вручну класи до 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.
Також див. Статтю Девіда Олівера.