Как убрать отступ у последнего элемента css
Для того, чтобы убрать отступ у последнего элемента, например в списке, можно воспользоваться псевдоклассом :last-child .
Рассмотрим пример. Имеется маркированный список, в правилах css задан отступ снизу у каждого элемента li в 10px;
123 456 789
li margin-bottom: 10px; > li margin-bottom: 10px; > li:last-child margin-bottom: 0px; > Как убрать отступ у последнего элемента css
Отрицаем всё! Исключаем из выборки селектора элементы с определённым признаком.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 18 июля 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Очень полезный псевдокласс, который поможет вам неплохо так сэкономить строчки кода. Суть работы этого парня — отсечь все элементы, не подходящие под условие. Звучит сложнее, чем выглядит.
Пример
Скопировать ссылку «Пример» Скопировано
Как вы наверняка уже знаете, между элементами принято задавать отступы так, чтобы у последнего или первого не было лишних отступов, чтобы они не торчали без дела и не меняли размеры родителя без причины.
Например, есть задача задать нижний отступ всем пунктам списка, кроме последнего:
Задаём нижние отступы всем пунктам списка:
li margin-bottom: 1em;>li margin-bottom: 1em; >
Сбрасываем нижний отступ у последнего пункта списка, чтобы не висел:
li:last-child margin-bottom: 0;>li:last-child margin-bottom: 0; >
Для самого простого решения этой задачи нам потребовалось 2 блока кода. Но, скорее всего, в вашем проекте нужно будет сбросить лишние отступы не только для этого элемента. Точно можно как-то проще.
Конечно можно! Сократим два блока кода до одного, используя псевдокласс :not . Выберем все пункты списка, кроме последнего, и зададим им нижние отступы:
li:not(:last-child) margin-bottom: 1em;>li:not(:last-child) margin-bottom: 1em; >
Вуаля! Красиво, аккуратно, а главное, работает ровно как задумывалось ��
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Берём любой селектор, ставим двоеточие и пишем ключевое слово not . После него ставим круглые скобки и внутри них указываем селектор, который должен быть исключён из выборки. Селектор в скобках может быть любым, главное чтобы он не включал псевдоэлементы. В скобках можно указать и несколько селекторов, перечисленных через запятую. В таком случае будут исключаться элементы подходящие под любой из перечисленных селекторов.
Ещё можно выбирать внутри body любой элемент, не являющийся, например, абзацем: body : not ( p ) . По аналогии можете выбирать любой элемент внутри определённого родителя, но не подходящий под условие.
Как понять
Скопировать ссылку «Как понять» Скопировано
Можно сказать заумно, что :not ( Х ) это функция, которая принимает в качестве аргумента селектор Х и находит в разметке элементы, не соответствующие этому самому элементу Х.
А можно проще: мы командуем браузеру «Выбери все элементы подходящие к селектору до :not и исключи из выборки все элементы, подходящие под селектор в круглых скобках».
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Слева от :not необязательно должен быть селектор. Можно написать :not ( . hidden ) , и браузер выберет вообще все элементы на странице, кроме тех, у которых есть класс .hidden .
�� Если очень захотеть — можно в космос полететь написать бесполезный селектор: :not ( * ) . Такой селектор выберет любой элемент, который не является любым элементом ��♀️
�� Нельзя вкладывать один :not в другой.
�� Можно выстраивать цепочки из :not . Тогда выборка будет уменьшаться по порядку исключая элементы, подходящие под условия.
Красим в красный все пункты списка, кроме последнего элемента и кроме тех, у которых есть класс .active :
li:not(:last-child):not(.active) color: red;>li:not(:last-child):not(.active) color: red; >
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� После того, как поддержка этого псевдокласса была внедрена во все браузеры, я стала использовать его повсеместно. Гораздо удобнее написать один селектор, чем два блока кода для такой тривиальной задачи, как сброс последнего отступа или выбор элемента за исключением какого-то класса.
Из последнего: мне нужно было стилизовать все поля ввода, кроме тех, что были скрыты (иногда в форму добавляют скрытые поля, чтобы отправить вместе с данными пользователя служебные данные). Вместо того, чтобы писать составной селектор, выбирая отдельные поля или выдумывать отдельный класс только для тех полей, которые видны или не видны, я написала селектор input : not ( [ hidden = «true» ] ) , и интерпретатор применил нужные мне стили только к тем инпутам, у которых нет атрибута hidden .
Псевдокласс :nth-last-of-type
Псевдокласс :nth-last-of-type используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-of-type отсчёт ведётся не от первого элемента, а от последнего.
Синтаксис
Селектор:nth-last-of-type(odd | even | | )
Синтаксис
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
odd Все нечётные номера элементов, начиная с конца. even Все чётные номера элементов, начиная с конца. <число>Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это соответствует последнему элементу в списке. Задаётся в виде an±b , где a и b целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2,…
Если a равно нулю, то оно не пишется и запись сокращается до b . Если b равно нулю, то оно также не указывается и выражение записывается в форме an . a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы. Отсчёт ведётся от последнего элемента.
| Значение | Номера элементов | Описание |
|---|---|---|
| 1 | 1 | Последний элемент, является синонимом псевдокласса :last-of-type. |
| 5 | 5 | Пятый элемент с конца. |
| 2n | 2, 4, 6, 8, 10,… | Все чётные элементы, начиная с конца; аналог значения even . |
| 2n+1 | 1, 3, 5, 7, 9,… | Все нечётные элементы, начиная с конца; аналог значения odd . |
| 3n | 3, 6, 9, 12,… | Каждый третий элемент, начиная с конца. |
| 3n+2 | 2, 5, 8, 11, 14,… | Каждый третий элемент, начиная с предпоследнего. |
| n+4 | 4, 5, 6, 7, 8,… | Все элементы, кроме последних трёх. |
| -n+3 | 3, 2, 1 | Последние три элемента. |
| 5n-2 | 3, 8, 13, 18, 23,… | — |
| even | 2, 4, 6, 8, 10,… | Все чётные элементы, начиная с конца. |
| odd | 1, 3, 5, 7, 9,… | Все нечётные элементы, начиная с конца. |
Пример
| 2134 | 2135 | 2136 | 2137 | 2138 | |
| Нефть | 16 | 34 | 62 | 74 | 57 |
| Золото | 4 | 69 | 72 | 56 | 47 |
| Дерево | 7 | 73 | 79 | 34 | 86 |
| Камни | 23 | 34 | 88 | 53 | 103 |
В данном примере псевдокласс :nth-last-of-type используется для выделения цветом всех нечётных колонок, начиная с последней (рис. 1).
Рис. 1. Применение псевдокласса :nth-last-of-type к колонкам таблицы
Спецификация
| Спецификация | Статус |
|---|---|
| Selectors Level 4 | Рабочий проект |
| Selectors Level 3 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 9 | 12 | 4 | 9.5 | 3.2 | 3.5 |
| 2.1 | 1 | 10 | 3.2 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
- :nth-last-child() и :nth-last-of-type()
- :nth-of-type()
- Псевдокласс :nth-child
- Псевдокласс :nth-last-child
- Псевдокласс :nth-of-type
Отступ после последнего li в ul. Как убрать? [дубликат]
Проблема в ширине ul. Откуда берется отступ после последнего li в ul? Все padding и margin справа на нуле. Как можно убрать?
Отслеживать
задан 17 мая 2019 в 10:48
RedLionHeart RedLionHeart
73 1 1 серебряный знак 7 7 бронзовых знаков
Надо пример кода, желательно на jsfiddle или чем-то подобном.
17 мая 2019 в 12:19
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Если нужна выборка именно последнего элемента вы можете воспользоваться псевдоклассом last-child
:last-child < // тут ваши стили >Так же советую вам почитать про выборку с помощью псевдокласса nth-child()
Подробнее про last-chiild
В целом про псевдоклассы
Отслеживать
ответ дан 17 мая 2019 в 14:35
user298256 user298256
тут скорее вопрос про сам ul, нежели про последний li
17 мая 2019 в 15:20
Не совсем понятно о каком отступе после последнего li идет речь, т.к. на скрине показан лишь весь список целиком. Если речь идет об этом пустом пространстве:
То с чего вы взяли, что это отступ? У вас указана фиксированная ширина для списка в 62.5% и это, вполне возможно, просто пустое пространство, не заполненное элементами списка, которые, скорее всего (судя по скрину) так же сделаны через float:left . Чтобы дать более точный ответ на вопрос нужно смотреть на стили самих li и родительского элемента в котором лежит ul . Если задача стоит в распределении всех элементов li равномерно по всей ширине ul то можете использовать следующие стили для вашего элемента ul :
.main-nav
А если задача укоротить сам ul то просто сделайте ему меньшую ширину.