Css not last child selector

CSS-селектор :not. Полезные примеры

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

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

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

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

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

ul li < /* наши красивые стили */ > 

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

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

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

1) обнулить мешающие стили в слайдерах и других местах. Но это противоречит « DRY » и является одним из признаков «вонючего» кода. К тому же не решает проблему раз и навсегда: добавите, например, аккордеон и списки в нем снова придется обнулять.

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

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

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

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

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

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

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

/* с перезаписью свойств */ ul:hover li < opacity:0.5; > ul:hover li:hover < opacity:1; > 

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

/* используя :not() */ ul:hover li:not(:hover) < opacity:0.5; > 

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

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

Через перезапись свойств. Но тут два правила вместо одного, что не есть « DRY ».

.menu-item:after < content: ' | '; > .menu-item:last-child:after < content: none; > 

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

.menu-item:nth-last-child(n+2):after < content: ' | '; > 

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

.menu-item:not(:last-child):after < content: ' | '; > 

Пример 4. Debug css

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

/* подсвечиваем теги без необходимых атрибутов */ img:not([alt]), label:not([for]), input[type=submit]:not([value]) < outline:2px solid red; > /* тревога, если первый child внутри списка не li и прочие похожие примеры */ ul > *:not(li), ol > *:not(li), dl > *:not(dt):not(dd) < outline:2px solid red; > 

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

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

select, textarea, [type="text"], [type="password"] < /* стили для текстовых полей ввода */ > 

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

select, textarea, [type="text"], [type="password"], [type="color"], [type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="number"], [type="search"], [type="tel"], [type="time"], [type="url"], [type="month"], [type="week"] < /* стили для текстовых полей ввода */ > 

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

select, textarea, [type]:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="image"]) < /* стили для текстовых полей ввода */ > 

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

Поддержка

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

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

Источник

How to Select All Child Elements Except the Last One

Sometimes, you may need to select all the child elements except the last element. It’s quite easy to do this using the :not and :last-child pseudo-classes.

The :not pseudo-class specifies elements that do not match a list of selectors and the :last-child selects the element if it is the last child among the other elements.

In our examples, we’ll use the following syntax:

Create HTML

nav> a href="https://www.w3docs.com/learn-html.html">Learn HTML a> a href="https://www.w3docs.com/learn-css.html">Learn CSS a> a href="https://www.w3docs.com/learn-git.html">Learn Git a> a href="https://www.w3docs.com/learn-javascript.html">Learn Javascript a> a href="https://www.w3docs.com/learn-php.html">Learn PHP a> a href="https://www.w3docs.com/snippets">Snippets a> nav>

Add CSS

• Specify the margin property for the element.
• Style and position elements inside using the text-transform, text-decoration, color, font-family, text-align, display and other properties.
• Use the :not and :last-child pseudo-classes for the elements inside and mention the style that should not be applied to the last child element.

nav < margin: 30px; > nav a < text-transform: capitalize; text-decoration: none; color: rgba(60, 60, 60); font-family: sans-serif; padding: 5px 5px; margin-top: 20px; width: 140px; text-align: center; display: inline-block; > nav a:not(:last-child) < border-right: 5px solid #193fe6; >

Example of selecting all child elements except the last one:

html> html> head> title>Title of the document title> style> nav < margin: 30px; > nav a < text-transform: capitalize; text-decoration: none; color: rgba(60, 60, 60); font-family: sans-serif; padding: 5px 5px; margin-top: 20px; width: 140px; text-align: center; display: inline-block; > nav a:not(:last-child) < border-right: 5px solid #193fe6; > style> head> body> nav> a href="https://www.w3docs.com/learn-html.html">Learn HTML a> a href="https://www.w3docs.com/learn-css.html">Learn CSS a> a href="https://www.w3docs.com/learn-git.html">Learn Git a> a href="https://www.w3docs.com/learn-javascript.html">Learn Javascript a> a href="https://www.w3docs.com/learn-php.html">Learn PHP a> a href="https://www.w3docs.com/snippets">Snippets a> nav> body> html>

Result

So, we have created a navigation menu with elements separated by the right border except for the last element.

Let’s see another navigation menu, where we use some CSS properties on all child elements except the last one.

Example of using CSS properties on all child elements except the last one:

html> html> head> title>Title of the document title> style> nav < margin: 30px; > nav a < text-transform: capitalize; text-decoration: none; color: rgba(60, 60, 60); font-family: sans-serif; padding: 5px 5px; margin-top: 20px; width: 140px; text-align: center; display: inline-block; border: 1px solid #000000; border-radius: 10px; > nav a:not(:last-child) < background-color: #a2d4eb; > style> head> body> nav> a href="https://www.w3docs.com/learn-html.html">Learn HTML a> a href="https://www.w3docs.com/learn-css.html">Learn CSS a> a href="https://www.w3docs.com/learn-git.html">Learn Git a> a href="https://www.w3docs.com/learn-javascript.html">Learn Javascript a> a href="https://www.w3docs.com/learn-php.html">Learn PHP a> a href="https://www.w3docs.com/snippets">Snippets a> nav> body> html>

Источник

Css not last child selector

Отрицаем всё! Исключаем из выборки селектора элементы с определённым признаком.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

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

Например, есть задача задать нижний отступ всем пунктам списка, кроме последнего:

Задаём нижние отступы всем пунктам списка:

 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 .

Источник