Как сделать отступ всем блокам кроме последнего
Я пытаюсь установить некоторые CSS для работы с IE7 и IE8, и я застрял в селекторе: not().
Мне нужно выбрать все ячейки заголовка таблицы, кроме последнего. В настоящее время я использую это:
который не работает на IE7 + 8.
Существуют ли только обходные методы CSS?
Спасибо за некоторые подсказки!
Как вы его просите:
все ячейки заголовка таблицы, кроме последнего
может ссылаться на:
-
последний th таблицы, где бы он ни находился,
последний элемент строки (предположительно последний из thead>tr - и там может быть более одного tr ),
последний th в каждой строке.
Ни один из этих случаев не может быть разрешен 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
-
могут быть только они, :last-child() и :last-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 арсенале есть умение оперировать количеством элементов.
Контент-независимый дизайн
Какую форму примет контент и сколько его будет в конкретный момент времени — никто не знает. И мы не можем всегда полагаться на скрипты или обрезание текста, это неправильно. Правильно — быть независимым от количества контента и создавать для этого нужные механизмы и инструменты. Количественные селекторы это просто одна из идей для этого.
Веб дизайн это всегда изменчивость, гибкость и неопределенность. В нём скорее не знаешь, чем знаешь. Он уникален тем, что представляет с собой вид визуального дизайна, который не определяет формы, а предвидит, какие формы может что-то принять. Для кого-то это неприемлемо и непонятно, но для вас и меня это вызов и удовольствие.
Читайте также: