Как сделать отступ всем блокам кроме последнего

Обновлено: 06.07.2024

Я пытаюсь установить некоторые CSS для работы с IE7 и IE8, и я застрял в селекторе: not().

Мне нужно выбрать все ячейки заголовка таблицы, кроме последнего. В настоящее время я использую это:

который не работает на IE7 + 8.

Существуют ли только обходные методы CSS?

Спасибо за некоторые подсказки!

Как вы его просите:

все ячейки заголовка таблицы, кроме последнего

может ссылаться на:

Ни один из этих случаев не может быть разрешен CSS, понятным IE7/8 (например, ни одно решение в CSS вообще, th:last-child и th:last-of-type )

EDIT: в одном случае может быть решение. Если вы точно знаете, сколько элементов th есть в каждой строке, вы можете выбрать четвертый вариант с th ~ th ~ th ~ th .

Вам нужно изменить этот селектор, если в строке есть только th (селектор + тоже будет ОК) или если есть атрибуты @colspan или @rowspan (количество элементов в строке!= количество столбцов).

Элемент в html — это прямоугольник, для которого можно указать величины внутренних и внешних отступов, а также границу, которая разделяет их.

Отступы в CSS устанавливаются, например, для блочных элементов и таблиц. Рассмотрим основные свойства CSS для установки отступов:

Внешние отступы

Внешние отступы в CSS задаются при помощи свойства margin , которое устанавливает величину отступа от границ текущего элемента до внутренней границы его родительского элемента.

Свойство:

margin-bottom (нижний отступ)
margin-left (отступ слева)
margin-right (отступ справа)
margin-top (верхний отступ)

Значения:

Краткая запись:

margin:margin-top margin-right margin-bottom margin-left; margin:10px 20px 20px 30px;

Пример:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Внутренние отступы

Внутренние отступы в css создаются при помощи свойства padding , которое устанавливает значение полей от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.

Свойства:

padding-bottom (нижний отступ)
padding-left (отступ слева)
padding-right (отступ справа)
padding-top (верхний отступ)

Значения:

Краткая запись:

padding:padding-top padding-right padding-bottom padding-left; padding:10px 20px 20px 30px;

Пример:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Граница элемента (рамка)

Граница элемента в CSS устанавливается при помощи свойства border .

border-style (стиль границы)

Значения:

none (без границы)
dotted (из точек)
dashed (пунктирная)
solid (сплошная)
double (двойная)
groove (трехмерная)
ridge (трехмерная)
inset (трехмерная с тенью)
outset (трехмерная с тенью)

Пример:

border-width (ширина границы)

Значения:

thin (тонкая)
medium (средняя)
thick (толстая)
значение

Пример:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Как надо парту открывать,
Не знала я сначала,
И я не знала, как вставать,
Чтоб парта не стучала.

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Как надо парту открывать,
Не знала я сначала,
И я не знала, как вставать,
Чтоб парта не стучала.

border-color (цвет границы)

Значения:

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Краткая запись:

Внешние границы (outline)

Внешние границы в CSS создаются при помощи свойства outline , одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента. В отличие от линии, задаваемой через border , свойство outline не влияет на положение блока и его ширину.

outline-color (цвет)

Значения:

outline-width (ширина)

Значения:

thin (тонкая)
medium (средняя)
thick (толстая)
значение

outline-style (стиль границы)

Значения:

none (без границы)
dotted (из точек)
dashed (пунктирная)
solid (сплошная)
double (двойная)
groove (трехмерная)
ridge (трехмерная)
inset (трехмерная с тенью)
outset (трехмерная с тенью)

Краткая запись:

Некоторые приемы с границей

Рамка вокруг изображения

Пример:

Результат:

Двойная рамка с использованием CSS

Пример:

Результат:

Путь осилит идущий,

И поэтому я иду.
Через горы и пущи,
Через радость мою и беду.

Бывают моменты, когда вертикальные отступы верхнего и нижнего margin приводят начинающего верстальщика в недоумение. Рассмотрим такой вариант на примере:

Верстальщик ожидает увидеть следующее:

Однако на практике получается совсем другая картина:

И тогда появляется вопрос: почему нет некоторых отступов?

Ответ на него прост. Маржин отобразился именно так, как он был прописан в CSS, а вывод отличается от ожидаемого только потому, что произошло так называемое схлопывание этого свойства.

Схлопывание маржина – это наплывание граничных отступов друг на друга.

Стоит обратить внимание, что схлопыванию подвержен только вертикальный margin. При этом, у горизонтального маржина такой особенности не наблюдается.

Как это выглядит на практике?

Схлопывание выглядит следующим образом, например, у нас есть картинка с подписью:

Вопреки ожиданием отступ между картинкой и её подписью не будет равен 35 px, больший маржин поглотит меньший, следовательно, картинку и её подпись разделит путь в 25 px.

Дочерние элементы и их родители

В таком случае отступ от тэга h1 и тэга pбудет равен 30px. Следовательно, дочерний элемент, у которого отступ больше, потянет за собой и родителя, а родительский отступ схлопнется с дочерним.

Единственным вариантом, когда отступы суммируются является случай если они имеют разноимённые знаки (один имеет знак +, другой знак -)

Чем это поможет?

Это свойство вертикального margin пригодится при разметке текста. Так к примеру если тэгу p задать:

То между всеми абзацами будет отступ в 5 пикселей, и нам не придётся размечать первый и последний абзац, или в худшем случае все кроме них.

В спецификации и блогах про селектор :not обычно приводят какие-то искусственные примеры, которые хоть и объясняют синтаксис и принцип действия, но не несут никакой идеи о том, как получить пользу от нового селектора.

Ну окей, думаю я, в моей практике не встречались такие ситуации. Обходились мы ведь как-то раньше без :not. Приходилось немного переписать структуру селекторов или обнулить пару значений.

Пример 1. Элемент без класса

Селектор :not может быть крайне полезен, когда нам нужно застилить контент сгенерированный пользователем (нет возможности расставить в нем классы), или когда у нас контента очень много и расставлять в нем классы слишком трудоёмко.

Например, мы хотим на сайте сделать красивые буллиты для ненумерованных списков ul li. Мы пишем код:

В результате, наши красивые буллиты появляются не только в контенте, но и, например, в навигации, где тоже используются ul li.

Мы ограничиваем область действия селектора:

Навигацию мы спасли, но ненужные буллиты всё еще вылазят на слайдерах, списках новостей и других конструкциях внутри .content, где тоже используются ul li.

Далее у нас варианты:

2) пойти от обратного и ставить класс всем спискам, которые нужно стилизовать:

Это добавляет лишней работы по расстановке классов в контенте. Иногда имеет смысл, но лишнюю работу никто не любит.

3) стилизовать только те ul li, у которых нет никаких классов вообще:

Победа! Нам не нужно делать дополнительную работу по расстановке классов в контенте. А на слайдерах, аккордеонах и прочих конструкциях, которые не должны выглядеть как списки, но используют их в своей разметке, в 99% случаев уже будут свои классы, и наши стили их не затронут.

Пример 2. Изменение внешнего вида всех элементов, кроме наведенного

Такой эффект можно реализовать без :not путем перезаписи значений. И это будет работать в бо́льшем количестве браузеров.

ul:hover li < opacity:0.5; >ul:hover li:hover

Но если придется обнулять слишком много свойств, то есть смысл использовать :not.

Пример 3. Меню с разделителями между элементами

Как и в предыдущем примере, желаемого можно добиться несколькими способами.

Через :nth-last-child(). Одно правило, но тяжело читается.

Через :not() — самая короткая и понятная запись.

Пример 4. Debug css

Удобно для отладки и самоконтроля искать/подсвечивать картинки без alt, label без for и другие ошибки.

img:not([alt]), label:not([for]), input[type=submit]:not([value]) < outline:2px solid red; >ul > *:not(li), ol > *:not(li), dl > *:not(dt):not(dd)

Пример 5. Поля форм

Раньше текстовых полей форм было не много. Достаточно было написать:

С появлением новых типов полей в HTML5 этот список увеличился:

Вместо перечисления 14 типов инпутов можно исключить 8 из них:

Ладно, этот пример не очень красив, и я рекомендую всё же первый вариант с перечислением, он работает с IE8+, а второй вариант с IE9+.

Поддержка

Следует заметить, что согласно спецификации в скобках селектора :not() может стоять только простой селектор и в скобках нельзя использовать сам селектор :not(). Если нужно исключить несколько элементов, :not() можно повторить несолько раз, как в примере 5.

Если очень нужны CSS3-селекторы в браузерах, которые их не поддерживают, можно использовать полифил selectivizr.

Отступ для всех блоков, кроме первого или последнего

К примеру: есть список с четырьмя элементами

Item 1
Item 2
Item 3
Item 4

между которыми нужно сделать отступ по высоте, так, чтобы при li < margin-top; >первый элемент списка не сдвигался вниз от края родителя.

Если проще: нужно чтобы для первого li, margin-top не срабатывал.

Тоже самое справедливо и для margin-, только в этом случаи — отступа не должно быть после последнего элемента.

Понятно что сдвигаемому элементу можно назначить признак(например дать класс) и уже по нему назначить margin, но неужели в CSS нет отдельного свойства для этого?

задан 18 дек ’17 в 14:01

85122 золотых знака77 серебряных знаков1717 бронзовых знаков

Может так что-то можно сварганить?

:first-child — применяет стилевое оформление к первому дочернему элементу своего родителя.

:last-child — задает стилевое оформление последнего элемента своего родителя.

:not — задаёт правила стилей для элементов, которые не содержат указанный селектор.

ответ дан 18 дек ’17 в 14:16

Алексей ШиманскийАлексей Шиманский

52.7k99 золотых знаков7373 серебряных знака143143 бронзовых знака

С помощью li:first-child, li:last-child.

Однако если есть скрытые элементы, как например в примере выше, из-за чего не применяется li:last-child, то можно использовать li:first-of-type и li:last-of-type.

ответ дан 18 дек ’17 в 15:33

2,18933 серебряных знака1414 бронзовых знаков

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css веб-программирование вёрстка или задайте свой вопрос.

Псевдоклассы можно использовать для выбора определенного элемента из списка. В этом уроке мы расскажем о псевдоклассе :nth-child, что можно создать с помощью этого псевдокласса и чем он может быть полезен. Псевдокласс :nth-child позволяет выбрать группу элементов с общими свойствами. Наиболее часто он используется для выбора четных или нечетных элементов из группы. Нередко его используют, чтобы таблица выглядела, как зебра, задавая разные цвета фона четным и нечетным рядам.

Еще псевдокласс :nth-child позволяет разделить элементы с общим свойством на группы и затем выбрать определенный элемент из каждой группы, используя следующий синтаксис:

Здесь a определяет количество элементов в группе, а b определяет, какой элемент из группы будет выбран. Если использовать значение 2n+1, то элементы будут разделены на группы по два, и будут выбраны первые элементы каждой группы, т. е., элементы с нечетным порядковым номером. Если использовать значение 2n+2, то элементы снова будут разделены на группы по два, но теперь будут выбраны вторые элементы каждой группы, т. е., элементы с четным порядковым номером.

Еще в качестве примера для понимания псевдокласса:nth-child мы выберем с его помощью каждый четвертый элемент, т. е., четвертый, восьмой, двенадцатый, шестнадцатый и т. д. Для этого разделим элементы на группы по четыре и затем выберем каждый четвертый элемент.

Ниже приведен список из десяти элементов, и мы воспользуемся псевдоклассами :nth-child, :first-child и :last-child, чтобы выбрать элементы, которые хотим выделить.

Использование псевдокласса CSS :nth-child для выбора единственного элемента

Задавая псевдоклассу :nth-child значение в виде числа, можно выбрать, к какому потомку из группы обратиться:

Использование псевдокласса CSS :nth-child для выбора всех элементов, кроме первых пяти

Если задать псевдоклассу :nth-child значение в виде n+ число, можно выбрать все элементы, начиная с элемента с этим порядковым номером:

Использование псевдокласса CSS :nth-child для выбора только первых пяти элементов

Когда мы задаем псевдоклассу :nth-child значение в виде отрицательного n+ число, мы выбираем все элементы, находящиеся до элемента с этим порядковым номером:

Использование псевдокласса CSS :nth-child для выбора каждого третьего элемента

Псевдокласс :nth-child можно использовать, чтобы выбрать последовательность элементов, задавая, сколько элементов в последовательности и порядковый номер нужного элемента. Если задать значение 3n+1, будет выбран каждый третий элемент, начиная с первого:

Использование псевдокласса CSS :nth-child для выбора только нечетных элементов

Можно задать псевдоклассу :nth-child значение odd (нечетный), чтобы выбрать все элементы с нечетными порядковыми номерами. Т.е., первый, третий, пятый, седьмой, девятый и т. д элементы. Это очень удобно, чтобы задавать цвета соседним рядам таблицы.

Использование псевдокласса CSS :nth-child для выбора только четных элементов

Этот пример показывает то же, что и прошлый, но на этот раз выбраны все элементы с четными порядковыми номерами. Т.е., второй, четвертый, шестой, восьмой, десятый и т. д. элементы:

Использование псевдокласса CSS :first-child для выбора первого элемента

Другой псевдокласс :first-child выберет первый элемент:

Использование псевдокласса CSS :last-child для выбора последнего элемента

Кроме псевдокласса :first-child есть псевдокласс :last-child, который выберет последний элемент из группы элементов:

Использование псевдокласса CSS :nth-last-child для выбора предпоследнего элемента

Еще можно использовать псевдокласс :nth-last-child, который совмещает в себе возможности псевдоклассов :last-child и :nth-child, чтобы начинать отсчет элементов с конца. Т.е., можно выбрать элемент, отсчитывая порядковые номера с конца группы, например, в группе из десяти элементов можно выбрать второй с конца элемент:

Дополнительные материалы

Если вы хотите глубже ознакомиться с псевдоклассом :nth-child и быть в курсе изменений его возможностей, почитайте о нем на странице документации CSS.

Автор урока Paul Underwood

Количественные CSS селекторы

Вам когда-нибудь хотелось прямо в CSS коде посчитать, в меню 4 элемента или 10? Для четырех задать им ширину по 25%, а если набралось десять — прижать их друг к другу и уменьшить отступы?

Как выяснилось, CSS умеет работать с разным количеством элементов, позволяя избавиться от головных болей и лишнего кода на js.

Динамичный контент

Респонсив дизайн обычно ассоцируется с одной переменной — пространством. Когда мы тестируем респонсив сетки, мы берем какой-то объем контента и смотрим, сколько места он займет, как это выглядит и куда он влазит, а куда нет. То есть, контент считается константой, а пространство — переменной.

query являются основой респонсив дизайна, так как позволяют размечать границы, переходя которые одна сетка меняется на другую. Однако, на расстановку элементов и пространство вокруг них может влиять не только размер экрана, но и собственно сам контент.

Точно так же, как посетители сайта могут пользоваться множеством устройств с разными размерами экранов, ваши контент-менеджеры и редакторы могут добавлять или удалять контент. У них даже для этого целые CMS есть. Именно поэтому дизайны страниц в фотошопе потеряли свою актуальность — в них всегда фиксированная ширина экрана и всегда фиксированный контент.

В этой статье я опишу технику создания CSS, лишенного проблем с количеством (подсчётом) элементов. Достигается это за счёт специально оформленных селекторов. Я буду применять их в контесте решения классической проблемы: как разделить вёрстку элементов в горизонтальном меню сайта, когда в нём мало и много элементов. Например, как добиться того, что при 6 и более пунктах меню элементы имели стиль display: inline-block, а при меньшем количестве — display: table-cell.

Я не буду использовать шаблонизацию или js, мне даже не понадобятся прописывать классы у элементов меню. Техника использования только CSS селекторов соответствует принципу разделения интересов, согласно которому, контент (HTML) и отображение (CSS) имеют ясно обозначенные роли. Разметка — это работа CSS и, по возможности, одного только CSS.

Демо доступно на CodePen и еще будет упоминаться по ходу статьи.

Чтобы упростить понимание, я буду использовать картинки с кальмарами вместо HTML тегов. Зеленые кальмары будут за элементы, которые попадают под конкретный селектор, красные — за те, которые не попадают, а серые будут значить, что элемента не существует.

Чтобы узнать количество элементов, их нужно посчитать.

Считаем до одного

В описанном ниже примере я использую :only-of-type, чтобы применить стили ко всем кнопкам, которые являются единственными чилдами-кнопками среди их соседей.

N элементов

Для этого у нас есть селектор :nth-last-child(n), в который мы параметром передаем любое число. Он позволяет отсчитать столько-то элементов назад от конца списка. Например, :nth-last-child(6) выберет элемент, который является шестым с конца среди своих соседних элементов.

Всё становится интереснее, когда мы совмещаем :nth-last-child(6) и :first-child, в результате получая все элементы, которые являются шестыми с конца и при этом первыми с начала.

Если такой элемент существует, это будет значить, что у нас ровно 6 элементов. Таким образом, я написал CSS код, который может сказать, сколько элементов я вижу перед собой.

li:nth-last-child(6):first-child, li:nth-last-child(6):first-child ~ li

Больше или равно 6

Селектать фиксированное количество, будь то 6, 19 или 653 — не очень-то полезно, так как подобная необходимость очень редка. Это как в queries — не очень удобно использовать фиксрованную ширину вместо min-width или max-width:

В навигационном меню я хочу переключать стили с границей, основанной на количестве элементов, например, поменять нужные стили, если у меня 6 и больше элементов (а не ровно шесть).

Вопрос в том, как сделать такой селектор? и это вопрос смещений.

Параметр n+6

Хоть этот селектор и является мощным инструментом сам по себе, он не позволяет оперировать с количеством. Он применится не тогда, когда у нас больше шести элементов, а просто к элементам, у которых номер больше пяти.

Такой селект отсекает последние пять элементов от набора любой длины, что означает, что если у вас меньше шести элементов, то в селект ничего и не попадет.

Такая вот короткая запись и является решением нашей проблемы:

li:nth-last-child(n+6), li:nth-last-child(n+6) ~ li < /* здесь стили */ >

Разумеется, тут может быть любое положительное целое число, даже 653,279.

Меньше или N

li:nth-last-child(-n+6):first-child, li:nth-last-child(-n+6):first-child ~ li < /* здесь стили */ >

nth-child против nth-of-type

Обе группы селектов :nth-child() и :nth-of-type() имеют свои преимущества, исходя из того, чего вы хотите добиться. Так как :nth-child() не привязан к конкретному тегу, описанную выше технику можно применять к смешанным дочерним элементам:

С другой стороны, преимущество :nth-last-of-type() в том, что вы можете селектать элементы с одним тегом среди множества других соседних. Например, можно посчитать количество тегов

, несмотря на то, что они в одной куче с

Поддержка браузерами

Все используемые в статье селекторы CSS2.1 и CSS3 поддерживаются в Internet Explorer 9 и выше, а так же все современные мобильные и десктопные браузеры.

Internet Explorer 8 неплохо поддерживает большинство селектов, но задуматься о полифилле на js не помешает. В качестве альтернативы, можно расставить специальные классы для старых версий IE и приписать их к своим селекторам. В случае с навигационным меню, код будет выглядеть примерно так:

В реальном мире

Создавая стили, учитывающие разные сетки для разного количества элементов в меню, мы делаем вёрстку более стройной и подходящей для самых разных форматов — какой бы ни был контент, у нас всё учтено.

Поздравляю, теперь в вашем CSS арсенале есть умение оперировать количеством элементов.

Контент-независимый дизайн

Какую форму примет контент и сколько его будет в конкретный момент времени — никто не знает. И мы не можем всегда полагаться на скрипты или обрезание текста, это неправильно. Правильно — быть независимым от количества контента и создавать для этого нужные механизмы и инструменты. Количественные селекторы это просто одна из идей для этого.

Веб дизайн это всегда изменчивость, гибкость и неопределенность. В нём скорее не знаешь, чем знаешь. Он уникален тем, что представляет с собой вид визуального дизайна, который не определяет формы, а предвидит, какие формы может что-то принять. Для кого-то это неприемлемо и непонятно, но для вас и меня это вызов и удовольствие.

Читайте также: