Удалить поля для первого онлайн урок.


Иногда бывает желательно удалить верхнее или левое поле из первого элемента в контейнере. Аналогично, правый или нижний край от последнего элемента в контейнере. Вы можете сделать это, вручную применяя классы к 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-го предметов, Псевдо-селектор nth-child может помочь там:

* > :nth-child(3n+3) { margin-right: 0; }

Уравнение там 3n + 3 работает следующим образом:

(3x0) +3 = 3
(3x1) +3 = 6
(3x2) +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.: в IE 7+ поддерживается первый ребенок.: nth-child работает в Safari 3+, Firefox 3.5+ и Chrome 1+, но по-прежнему не работает в IE8.

Также см. Статью Дэвида Оливера .