CSS: применить стили ко всем элементам, кроме первого и последнего
Здравствуйте, товарищи! Каким образом можно применить стили ко всем элементам, кроме первого и последнего?
Вот так не работает:
.content > .item:not(:last-child):not(:first-child)
.item:first-child, .item:last-child
Отслеживать
задан 20 мар 2021 в 17:26
87 2 2 серебряных знака 14 14 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Всё работает. Просто у вас где-то ещё это перекрывается
.content > .item:not(:last-child):not(:first-child)
Отслеживать
ответ дан 20 мар 2021 в 17:32
Алексей Шиманский Алексей Шиманский
71.2k 12 12 золотых знаков 91 91 серебряный знак 180 180 бронзовых знаков
Вы имеете ввиду, что, перед классами item находится ещё какой-либо элемент?
20 мар 2021 в 17:38
@Linne я имею в виду, что у вас где-то подключены ещё CSS стили (может быть даже в том же файле ещё ниже, чем текущие строки) и они перекрывают текущие. Смотрите в консоль и инспектируйте элементы во вкладках Styles и Computed i.stack.imgur.com/OYbUK.png
20 мар 2021 в 18:08
Сейчас всё проверил и как выяснилось нет, не подключены. Сам не пойму в чём дело…
20 мар 2021 в 18:23
@Linne, чтобы выяснить причину, нужно чтобы код из вопроса воспроизводил проблему, сейчас она не воспроизодится
20 мар 2021 в 21:40
Вот так работает:
.content > .item:not(:last-of-type):not(:first-of-type)
Отслеживать
ответ дан 20 мар 2021 в 18:55
87 2 2 серебряных знака 14 14 бронзовых знаков
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
::after (:after)
В CSS, ::after создаёт псевдоэлемент, который является последним потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства content . По умолчанию является инлайновым.
/* Добавить стрелки после ссылок */ a::after content: "→"; >
Примечание: Псведоэлементы, созданные с помощью ::before и ::after содержатся в блоке форматирования элемента, и поэтому не применяются к замещаемым элементам, таким как или .
Синтаксис
Error: could not find syntax for this item
Примечание: В CSS3 появилась запись ::after (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись :after , введённую в CSS2.
Примеры
Простое использование
Давайте создадим два класса, один для скучных параграфов и один для потрясающих. Затем мы сможем отметить каждый параграф добавлением псевдоэлемента в его конец.
HTML
p class="boring-text">Вот простой скучный текст.p> p>Вот нормальный текст, который не является ни скучным, ни потрясающим.p> p class="exciting-text"> Помогать MDN легко и весело. Просто нажмите кнопку редактирования, чтобы добавить новые живые примеры, или улучшить существующие примеры. p>
CSS
.exciting-text::after content: "; color: green; > .boring-text::after content: "; color: red; >
Результат
Пример оформления
Можно стилизовать текст или изображения в свойстве content практически любым способом.
HTML
span class="ribbon">Посмотрите, где находится оранжевый прямоугольник.span>
CSS
.ribbon background-color: #5bc8f7; > .ribbon::after content: "Посмотрите на этот оранжевый прямоугольник."; background-color: #ffba10; border-color: black; border-style: dotted; >
Результат
Подсказки
Следующий пример показывает использование псевдоэлемента ::after в сочетании с CSS-выражением attr() и пользовательского data-* атрибута data-descr для создания подсказки на чистом CSS.
HTML
p> Здесь находится живой пример вышеприведённого кода.br /> У нас есть некоторый span data-descr="коллекция слов и знаков препинаний">текстspan> здесь с несколькими span data-descr="маленькие всплывающие окошки, которые снова исчезают" >подсказкамиspan >.br /> Не стесняйтесь, наводите мышку чтобы span data-descr="не понимать буквально">взглянутьspan>. p>
CSS
span[data-descr] position: relative; text-decoration: underline; color: #00f; cursor: help; > span[data-descr]:hover::after content: attr(data-descr); position: absolute; left: 0; top: 24px; min-width: 200px; border: 1px #aaaaaa solid; border-radius: 10px; background-color: #ffffcc; padding: 12px; color: #000000; font-size: 14px; z-index: 1; >
Результат
Спецификации
| Specification |
|---|
| CSS Pseudo-Elements Module Level 4 # generated-content |
Поддержка браузерами
BCD tables only load in the browser
Смотрите также
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Псевдокласс :last-child
Псевдокласс :last-child задаёт стиль последнего элемента в группе братских элементов (имеющих одного родителя).
В качестве примера рассмотрим следующий код HTML:
Роль цитокинов при дорсалгии
Автор: Гордон Фримен, канд. физ.-мат. наук
Содержание статьи
Почта: freemen@blackmesa.com Опубликовано:
Псевдокласс :last-child без указания селектора выберет все последние элементы внутри и установит для них красный цвет текста. Здесь последними идут
и они и будут выбраны.
article :last-child
При добавлении селектора к :last-child сперва берётся последний элемент, затем смотрится какого он типа. Если элемент совпадает с указанным селектором, то он будет выбран. Таким образом, выбирается элемент, если он удовлетворяет двум условиям одновременно: это последний элемент и это элемент указанного типа. Здесь красным цветом будет выделен абзац, поскольку последним идёт именно
.
article p:last-child
Если вместо p использовать другой селектор, то ничего выбрано не будет, поскольку не выполняется условие «последний элемент это ».
article h1:last-child
Для выбора последнего элемента определённого типа используйте псевдокласс :last-of-type.
Вместо :last-child допустимо использовать :nth-last-child(1).
Синтаксис
Селектор:last-child
Синтаксис
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Пример
Результат примера показан на рис. 1. В данном примере псевдокласс :last-child применяется для определения стиля последнего элемента , расположенного внутри контейнера с именем класса block . Это позволило создать цветную полосу внизу блока без включения новых классов.
Рис. 1. Результат использования псевдокласса :last-child
Спецификация
| Спецификация | Статус |
|---|---|
| Selectors Level 4 | Рабочий проект |
| Selectors Level 3 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 9 | 12 | 1 | 9.5 | 3.2 | 1 |
| 2.1 | 1 | 10 | 3.2 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
- :first-child и :last-child
- :first-of-type и :last-of-type
- :nth-last-child() и :nth-last-of-type()
- Псевдокласс :first-child
- Псевдокласс :first-of-type
- Псевдокласс :last-of-type
- Псевдоклассы в CSS
Как взять последний элемент массива js
Используя возможности JavaScript, последний элемент массива можно найти с помощью метода Array.prototype.at():
Посмотрим на пример:
const numbers = [1, 2, 3, 4]; console.log(numbers.at(-1)); // => 4 Для нахождения последнего элемента в массиве укажите в скобках -1.
Такой метод доступен начиная с Node 16.6
Документация:
- Array.prototype.at()
21 апреля 2023
arr.slice(-1) //как вариант
01 ноября 2021
Если необходимо получить значение последнего элемента массива, то это можно сделать просто обратившись по индексу. Индексом будет длина массивам минус один:
const numbers = [1, 2, 3]; const item = numbers[numbers.length - 1]; console.log(item); // => 3 Есть встроенный метод pop() , который извлекает последний элемент из массива и при этом удаляет этот элемент в исходном массиве:
const numbers = [1, 2, 3]; const item = numbers.pop(); console.log(item); // => 3 console.log(numbers); // => [1, 2]