Last child after: html — Css для хлебных крошек :last-child:after

Содержание

CSS использование :after и :last-child вместе

Я пытаюсь объединить псевдоэлементы : after и :last-child вместе, но, похоже, мне не везет.

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

Это fiddle может прояснить, что я имею в виду:

как вы можете видеть, последний немного смещен от центра

Вот как я пытаюсь получить последний элемент:

input[name='happy-score']:last-child + label:after {
    left: 0px;
}

Однако это не имеет никакого эффекта, что так всегда.

Я тоже пытался:

input[name='happy-score']+ label:last-child:after {
    left: 0px;
}

Однако это, по-видимому, влияет на все элементы, см. Этот fiddle: https://jsfiddle.net/0acLrna0/

css
Поделиться Источник JamesG 28 апреля 2017 в 08:40
2 ответа
CSS first-child и last-child не работают при использовании одного и того же элемента
Я только что заметил, что CSS :first-child и :last-child не работают при использовании одного и того же элемента. Используется только один. Мне интересно, почему это так и есть ли какой-нибудь обходной путь к этому в CSS? Мне кажется, что CSS ошибка-первый элемент может быть также последним…
CSS: not (: last-child): после селектора
У меня есть список элементов, которые стилизованы следующим образом: ul { list-style-type: none; text-align: center; } li { display: inline; } li:not(:last-child):after { content:’ |’; } <ul> <li>One</li> <li>Two</li> <li>Three</li>…

2

Вы должны использовать этот css для метки последнего дочернего элемента: li:last-child input[name='happy-score'] + label:after { left: 0px; }
Поделиться mylena 28 апреля 2017 в 08:50

0

Используйте это и проверьте один раз
ul.=value_]:last-child Я должен выбрать классы, начинающиеся с num_ , и хочу применить к ним другое свойство last-child , у меня нет другой возможности добавить дополнительные классы или атрибуты. Я попробовал с #divMenu... Комбинируя CSS псевдоэлементов, ": после" the": last-child" Я хочу сделать grammatically correct списка, используя CSS. Это то, что у меня есть до сих пор: Теги <li> отображаются горизонтально с запятыми после них. li { display: inline;... CSS first-child и last-child не работают при использовании одного и того же элемента Я только что заметил, что CSS :first-child и :last-child не работают при использовании одного и того же элемента. Используется только один. Мне интересно, почему это так и есть ли какой-нибудь... CSS: not (: last-child): после селектора У меня есть список элементов, которые стилизованы следующим образом: ul { list-style-type: none; text-align: center; } li { display: inline; } li:not(:last-child):after { content:' |'; } <ul>... Использование :nth-child и :nth-last-child одновременно Я не могу заставить псевдоклассы :nth-child и :nth-last-child работать одновременно. Работает хорошо (выделяет первые 3 элемента): #a li:nth-child(-n+3) { background: #fbfcc8; } Работает хорошо... Clearfix ломает :last-child Это странно, но когда я использую :last-child для своих элементов, а затем ставлю clearfix div В конце, он ломает last-child? Есть какие-нибудь идеи? HTML: <div> <a href=#>first... Как использовать: last-child +: after together? Я не знаю, почему это не работает. Я пытаюсь изменить правило :after для элемента :last-child , но оно игнорирует :last-child:after . HTML: <section id=timeline>... CSS Susy Gallery-центр последнего ряда с nth-last-child У меня есть 4 столбца Susy CSS gallery grid, которые могут содержать любое количество блоков. Если в последней строке меньше 4 блоков, мне нужно, чтобы она была центрирована. Использование этого... Правильное использование CSS selector first-child Я хотел бы знать, существует ли какое-либо правильное использование :first-child ? Оба варианта CSS делают именно то, что я хочу. Но мне интересно, является ли вариант 1 нормальным использованием... Разукрашиваем таблицу В CSS3 появились удобные средства для улучшения стилевых таблиц печати и разбиения контента на столбцы. :nth-of-type [p:nth-of-type(2n+l){color: red;}] - Поиск всех элементов определенного типа. :first-child [р: first-child{ color: blue;}] - Поиск первого дочернего элемента. :nth-child [p:nth-child(2n+l){color: red;}] - Поиск заданного дочернего элемента в прямом направлении (от начала к концу). :last-child [p:last-child{color:blue;}] - Поиск последнего дочернего элемента. :nth-last-child [p:nth-last-child(2){color: red;}] - Поиск заданного дочернего элемента в обратном направлении. :first-of-type [p:first-of-type{color:blue;}] - Поиск первого элемента заданного типа. :last-of-type [р:last-of-type{color:blue;}] - Поиск последнего элемента заданного типа. Поддержка столбцов [#content{ column-count: 2; column-gap: 20рх; column-rule: lpx solid #ddccb5; }] - Разбиение области контента на несколько столбцов. :after [span.weight:after { content: "lbs"; color: #bbb; }] - Используется с content для вставки контента после заданного элемента. [media="only all and (max-width: 480)"] - Применение стилей в зависимости от параметров устройства. Создадим простую таблицу без стилей. Она будет выглядеть так. Название Цена Количество Итого Кружка $10.00 5 $50.00 Рубашка $20.00 5 $100.00 Ножницы $9.00 4 $36.00 Промежуточный итог $186.00 Доставка $12.00 Всего $198.00 Зебра (:nth-of-type) Эффект зебры (чередование цвета строк) полезен тем, что упрощает просмотр данных по строкам. Раньше в строку таблицы приходилось включать дополнительные классы (например, odd и even для нечетных и четных строк соответственно). При помощи новых селекторов мы можем добиться желаемого эффекта без изменения разметки. Селектор nth-of-type находит каждый элемент конкретного типа, определяемый формулой или ключевыми словами. Чтобы каждая вторая строка таблицы была окрашена в другой цвет, проще всего найти все чётные строки таблицы и назначить им другой цвет фона. То же самое делается с нечетными строками. В CSS3 имеются ключевые слова even и odd, предназначенные именно для таких ситуаций. Фактически этот селектор означает: «Найти каждую чётную строку таблицы и задать ее цвет. Затем найти каждую нечётную строку таблицы и задать её цвет». table{ border-collapse: collapse; width: 600px; } th, td{ border: none; } th{ background-color: #000; color: #fff; } tr:nth-of-type(even){ background-color: #F3F3F3; } tr:nth-of-type(odd){ background-color:#ddd; } Название Цена Количество Итого Кружка $10.00 5 $50.00 Рубашка $20.00 5 $100.00 Ножницы $9.00 4 $36.00 Промежуточный итог $186.00 Доставка $12.00 Всего $198.00 Выравнивание текста столбцов (:nth-child) По умолчанию текст во всех столбцах таблицы выравнивается по левому краю. Мы выровняем по правому краю все столбцы, кроме первого, чтобы цена и количество единиц товара лучше читались. Для этого мы воспользуемся селектором nth-child. Селектор nth-child ищет дочерние элементы заданного элемента; по аналогии с nth-of-type, он может использовать ключевые слова или формулу. Формула определяется в виде an + b, где а — множитель, n — счетчик, начинающийся с 0, b — смещение. Принцип использования формул проще понять в контексте; давайте применим его в таблице. Для выбора всех строк таблицы можно воспользоваться селектором вида: table tr:nth-child(n) В этом примере не указан ни множитель, ни смещение. Все строки таблицы, кроме первой (строка с заголовками столбцов), выбираются при помощи селектора со смещением: table tr:nth-child(n+2) Счетчик равен 0, но со смещением 2, отсчёт начинается не от начала таблицы, а со второй строки. Для выбора каждой второй строки таблицы используется множитель 2: table tr:nth-child(2n) Каждая третья строка выбирается при помощи множителя 3n. Если прибавить к множителю смещение, то поиск будет начинаться не от начала таблицы, а с одной из следующих строк. Следующий селектор находит каждую вторую строку, начиная с четвертой: table tr :nth-child(2n+4) Итак, для выравнивания всех столбцов, кроме первого, используется следующая запись: td:nth-child(n+2), th:nth-child(n+2){ text-align: right; } Название Цена Количество Итого Кружка $10.00 5 $50.00 Рубашка $20.00 5 $100.00 Ножницы $9.00 4 $36.00 Промежуточный итог $186.00 Доставка $12.00 Всего $198.00 Последняя строка (:last-child) Хотите, чтобы нижняя строка выделялась жирным шрифтом? Воспользуемся селектором last-child, который находит последний дочерний элемент группы. tr:last-child{ font-weight: bolder; } Выделим также последний столбец таблицы, чтобы суммы строк тоже выделялись на общем фоне: td:last-child{ font-weight: bolder; } Наконец, при помощи селектора last-child можно увеличить размер шрифта общей суммы в правом нижнем углу таблицы. Мы находим последний столбец последней строки и изменяем его оформление. tr:last-child td:last-child{ font-size:24px; } Название Цена Количество Итого Кружка $10.00 5 $50.00 Рубашка $20.00 5 $100.00 Ножницы $9.00 4 $36.00 Промежуточный итог $186.00 Доставка $12.00 Всего $198.00 Поиск в обратном направлении (:nth-last-child) Если стоимость доставки снижена под действием скидки, то соответствующая строка таблицы должна выделяться цветом. Для быстрого поиска этой строки удобно использовать селектор nth-last-child. Вы уже видели, как селектор nth-child и формула аn+b используются для выбора конкретных дочерних элементов. Селектор nth-last-child работает практически так же, если не считать того, что он перебирает дочерние элементы в обратном порядке, начиная с последнего. Это позволяет легко найти предпоследний элемент группы. Селектор определяет конкретный дочерний элемент — второй с конца. tr:nth-last-child(2){ color: green; } В оформление таблицы осталось внести последний штрих. Ранее мы выровняли по правому краю все столбцы, кроме первого. Для строк с опи саниями и ценами товаров такое выравнивание естественно, но последние три строки выглядят немного странно. Для них лучше использовать выравнивание по правому краю. Для решения этой задачи мы используем селектор nth-last-child с отрицательным множителем и положительным смещением. tr:nth-last-child(-n+3) td{ text-align: right; } Такая формула реализует интервальный выбор. В ней используется смещение 3, а с селектором nth-last-child выбирается каждый элемент до заданного смещения. Если бы вместо него использовался селектор nth-child, то строки выбирались бы от начала таблицы. Название Цена Количество Итого Кружка $10.00 5 $50.00 Рубашка $20.00 5 $100.00 Ножницы $9.00 4 $36.00 Промежуточный итог $186.00 Доставка $12.00 Всего $198.00 Реклама CSS-селектор :not. Полезные примеры В спецификации и блогах про селектор :not обычно приводят какие-то искусственные примеры, которые хоть и объясняют синтаксис и принцип действия, но не несут никакой идеи о том, как получить пользу от нового селектора. Например: p:not(.classy) { color: red; } Ну окей, думаю я, в моей практике не встречались такие ситуации. Обходились мы ведь как-то раньше без :not. Приходилось немного переписать структуру селекторов или обнулить пару значений. Пример 1. Элемент без класса Селектор :not может быть крайне полезен, когда нам нужно застилить контент сгенерированный пользователем (нет возможности расставить в нем классы), или когда у нас контента очень много и расставлять в нем классы слишком трудоёмко. Например, мы хотим на сайте сделать красивые буллиты для ненумерованных списков ul li. Мы пишем код: ul li { } В результате, наши красивые буллиты появляются не только в контенте, но и, например, в навигации, где тоже используются ul li. Мы ограничиваем область действия селектора: .content ul li { } Навигацию мы спасли, но ненужные буллиты всё еще вылазят на слайдерах, списках новостей и других конструкциях внутри .content, где тоже используются ul li. Далее у нас варианты: 1) обнулить мешающие стили в слайдерах и других местах. Но это противоречит «DRY» и является одним из признаков «вонючего» кода. К тому же не решает проблему раз и навсегда: добавите, например, аккордеон и списки в нем снова придется обнулять. 2) пойти от обратного и ставить класс всем спискам, которые нужно стилизовать: .textlist li { } Это добавляет лишней работы по расстановке классов в контенте. Иногда имеет смысл, но лишнюю работу никто не любит. 3) стилизовать только те ul li, у которых нет никаких классов вообще: ul:not([class]) li { } Победа! Нам не нужно делать дополнительную работу по расстановке классов в контенте. А на слайдерах, аккордеонах и прочих конструкциях, которые не должны выглядеть как списки, но используют их в своей разметке, в 99% случаев уже будут свои классы, и наши стили их не затронут. Этот прием — «выбирать только элементы без класса» — очень полезен для оформления пользовательского контента и его можно применять не только к спискам, но и для других случаев. Пример 2. Изменение внешнего вида всех элементов, кроме наведенного Пример Такой эффект можно реализовать без :not путем перезаписи значений. И это будет работать в бо́льшем количестве браузеров. ul:hover li { opacity:0.5; } ul:hover li:hover { opacity:1; } Но если придется обнулять слишком много свойств, то есть смысл использовать :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; } 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. Решено с помощью CSS! Логическая стилизация на основе числа элементов — CSS-LIVE Перевод статьи Solved with CSS! Logical Styling Based on the Number of Given Elements с сайта css-tricks.com для CSS-live.ru, автор — Юна Кравец Эта статья третья из серии про мощь CSS. Все статьи серии: А вы знали, что CSS — Тьюринг-полный? А что его можно использовать для вполне серьёзной логической стилизации? Можно-можно! И не нужно закладывать логику для стилевых правил в JavaScript, или навешивать скриптом классы, для которых вы задаете стили. Во многих случаях CSS сам справится с этим. Я до сих пор ежедневно открываю новые CSS-трюки, и этим CSS нравится мне всё больше и больше. В этом году, я начала работать в издательстве Bustle Digital Group. В СМИ, как и во множестве продуктов, команда разработчиков выстраивает платформу, которая должна подходить для всех практических задач. Наша CMS даёт возможность авторам и редакторам создавать статьи, а также править страницы и управлять вставкой рекламы. В отличии от работы со статическим сайтом, команда разработчиков не может полностью контролировать данные, поступающие от пользователя, так что удобства для пользователей не достичь без дизайнерских решений и правил управления. Некоторые из таких сценариев, с которыми мы столкнулись в мире цифровых СМИ, подкинули нам настоящие головоломки по части пользовательского интерфейса, которые и вдохновили меня присмотреться к способам их решения на CSS. Итак, взглянем на некоторые примеры! Пример 1: бинарные состояния Часто забытый и весьма полезный селектор — псевдоселектор :empty. Он позволяет оформлять элементы, отталкиваясь от того, есть ли в них контент или нет. Привет пустым состояниям! Пустые состояния — отличный способ «достучаться» до пользователя, «очеловечив» ваше приложение, и это можно сделать прямо из CSS. В этом примере у нас есть какой-то список от пользователя. Это могут быть статьи, которые пользователь опубликовал (как автор), или сохранил в закладках (как редактор). Применений тут масса. Вместо JavaScript можно использовать псевдоэлементы для вставки изображения, стилей и текста: Рисунки показывают, как стили применяются или нет в зависимости от того, есть в списке отображаемые элементы или нет. И решение здесь — всего лишь три строчки кода: div:empty:after { content: 'Ой, ничего'; } Можете также добавить псевдоэлемент :before для вставки изображения или любого нужного вам контента. Как альтернатива, можно взять псевдоселектор :not вместе с :empty, сделать правило :not(:empty) и оформить им все непустые элементы, то есть элементы с контентом. See the Pen Empty States by Максим (@psywalker) on CodePen. Примечание: этот пример существует только в целях демонстрации этой техники. Нежелательно класть контент в псевдоэлементы по соображениям доступности. Можно использовать тот же прием выбора пустых (:empty) или непустых (:not(:empty)) элементов, чтобы применить к дочерним элементам более доступные для скринридеров стили. Продвинутый выбор по количеству Этот пример был неплохой разминкой, но на CSS можно не только проверять, если ли дочерние элементы, но и решать более сложные задачи. В этом нам пригодится псевдоселектор :nth-child! На CSS-Tricks есть отличный инструмент, помогающий тестировать и играть с выборкой :nth-child, и вскоре вы узнаете, что он действительно может пригодиться. Но прежде давайте выясним, как именно это работает? Главное в этом коде — вот что, где div обозначает любой элемент, соседей которого мы будем считать, а x — число соседей, при котором стиль должен меняться: div:first-child:nth-last-child(n + x), div:first-child:nth-last-child(n + x) ~ div Использование :nth-last-child вместо :nth-child для выбора позволяет нам начать с конца последовательности, а не сначала. При выборе :nth-last-child(n + x) мы выбираем значение с номером x, начиная с конца. Если x = 3, то это выглядело бы так: Иллюстрация того, как :nth-last-child(3) выбирает третий элемент с конца списка. Итак, если мы хотим посчитать значения n + 3, мы выбираем все элементы, которые являются 3-м или более чем 3-м с конца. Начиная с n=0 (что будет значить 0 + 3), а 4-й элемент будет первым с конца после третьего. Это выглядит так: Иллюстрация того, как :nth-last-child(n+3) выбирает все элементы, соответствующие 3 или более 3 с конца. Начало неплохое, но идея в том, чтобы по условию стилизовать все элементы в зависимости от их количества. Поэтому нужно работать с этими условиями, но выбирать все элементы. Давайте начнём с выбора первого элемента. Нужно создать условие, чтобы увидеть, подходит ли вся выборка для стилизации, и затем начать с этого первого соседнего элемента: Ой. Сейчас у нас выбран только первый элемент, а нам нужны все элементы. К счастью, для этого можно использовать очень удобный селектор соседних элементов (~). Если изменить наш последний пример на :first-child:last-child(n + 3) ~ *, то он выберет все элементы, кроме первого, почти как нам нужно. А теперь можно видеть, что все элементы, следующие за первым, выбираются, но не хватает первого, поэтому здесь понадобятся два селектора, и следовательно итог такой: Сочетание обоих предыдущих примеров выберет все элементы в списке. Пример 2: форматирование списка Допустим, вы хотите указать в статье список благодарностей тем, кто участвовал в ее создании. Для этого как раз есть немного места, и у большинства статей таких благодарностей будет немного, но попадаются исключения, над которыми пришлось изрядно потрудиться множеству людей.Мы хотим обеспечить, чтобы и те, и другие хорошо смотрелись с помощью одного CSS. План таков: если благодарностей не более четырёх, то выводим их в виде маркированного списка. Пусть они выстраиваются по вертикали. Как только благодарностей станет больше четырёх, будем выводить их по горизонтали через точку с запятой, чтобы список не казался читателю слишком громоздким. В конце концов это же небольшой блок с благодарностями. Иллюстрации вертикального неупорядоченного списка (слева) и горизонтального списка, разделённого точкой с запятой (справа) Можно проверить число доступных элементов и застилизовать их как блочные, пока не упрёмся в предел. В этот момент мы перейдём к строчному оформлению, добавив псевдоэлемент для визуального разбиения данных. /* 5 или более элементов отображаются друг за другом */ li:first-child:nth-last-child(n + 5), li:first-child:nth-last-child(n + 5) ~ li { display: inline; } /* Добавляем точку с запятой после каждого элемента кроме последнего */ li:first-child:nth-last-child(n + 5) ~ li::before { content: ';'; margin: 0 0.5em 0 -0.75em; } :nth-first-child:nth-last-child(n + 5) позволяет сообщить: «начни с первого дочернего элемента и примени стили к нему и к элементам, следующим за ним, если их пять и более». Запутанно? Нуу, это работает. li:first-child:nth-last-child(n + 5) выбирает первый элемент списка, а li:first-child:nth-last-child(n + 5) ~ li — каждый элемент, следующий за первым. See the Pen RYWoZY by Максим (@psywalker) on CodePen. Пример 3: карусель с условием Давайте с помощью этой техники сделаем карусель отзывчивой. На большом экране она должна центрироваться посередине страницы, когда она содержит три элемента. Но когда элементов достаточно, чтобы заполнить экран по горизонтали, то выровним её по левому краю, чтобы пользователь мог листать (свайпить) её. Иллюстрация карусели с тремя элементами (слева) и с четырьмя и более (справа) Вот что тут можно сделать: растянуть элементы и заполнить ими весь экран, если их не так много, чтобы случилось переполнение. А если переполнение случится, давайте используем его на всю катушку и покажем все возможности карусели, показав стрелками, что ее можно скроллить, и увеличив отступы между элементами. Поверх этого, давайте добавим с краю кнопку со стрелкой, показав, что можно скроллить все элементы и привязать JavaScript-события, чтобы заставить карусель скроллиться. Мы можем воспользоваться тем же самым приёмом, что в предыдущем примере, но нам ещё понадобится один лишь first-child, чтобы найти и отобразить в интерфейсе div со стрелкой. HTML выглядел бы так: <ul> <li> <div>1</div> </li> <li> <div>2</div> </li> ... <button>——></button> </ul> Пустые элементы в DOM — не идельно, но смотрите. Это по-прежнему умный хак. Мы применим к кнопке .arrow visibility: hidden, сделав её невидимой для DOM и скринридеров, если условия не применяются (если элементов четыре или более). В противном случае мы отобразим её с помощью display: block, применим к ней стили и нужное позиционирование. li:first-child:nth-last-child(n + 5) ~ .arrow { display: block; position: sticky; ... } See the Pen Box Alignment by Максим (@psywalker) on CodePen. Больше информации! При исследовании данного материала я нашла отличную статью Хейдона Пикеринга по этой теме, названную «Количественные выражения», и ещё примеры Лии Веру! В комментариях к статье Хейдона Пол Айриш отмечает, что это более медленный способ выборки элементов, так что используйте его с осторожностью. P.S. Это тоже может быть интересно: Объединение псевдоэлементов CSS, ": после": last-child " Добавил еще один ответ на этот вопрос, потому что мне нужно было именно то, о чем просил @derek, и я уже продвинулся немного дальше, прежде чем увидел здесь ответы. В частности, мне был нужен CSS, который мог бы также учитывать случай с ровно двумя элементами списка, где запятая НЕ желательна. Например, некоторые авторские подписи, которые я хотел создать, будут выглядеть следующим образом: Один автор: Адам Смит. Два автора: Адам Смит и Джейн Доу. Три автора: Адам Смит, Джейн Доу и Фрэнк Андервуд. Решения, уже приведенные здесь, работают для одного автора и для трех или более авторов, но не учитывают случай двух авторов, когда стиль «Оксфордская запятая» (также известный как стиль «Гарвардская запятая» в некоторых частях) не учитывается. apply - т.е. перед союзом не должно быть запятой. После полудня работы я пришел к следующему: Адам Смит Адам Смит Джейн Доу Адам Смит Джейн Доу Фрэнк Андервуд Он отображает имена авторов в том виде, в котором они указаны выше. В конце концов, мне также пришлось избавиться от любых пробелов между li элементами, чтобы обойти досаду: в противном случае свойство inline-block оставило бы пробел перед каждой запятой.Вероятно, есть альтернативный достойный взлом, но это не является предметом этого вопроса, поэтому я оставлю это кому-то другому, чтобы ответить. Fiddle здесь: http://jsfiddle.net/5REP2/ CSS: селектор nth-last-child () Пример Укажите цвет фона для каждого элемента , который является вторым дочерним элементом его родитель, считая от последнего дочернего элемента: p: nth-последний-ребенок (2) { фон красный; } Попробуй сам " Дополнительные примеры "Попробуйте сами" ниже. Определение и использование Селектор : nth-last-child ( n ) соответствует каждому элементу, который является n -м дочерним элементом, независимо от тип своего родителя, считая от последнего дочернего элемента. n может быть числом, ключевым словом или формулой. Совет: Посмотрите на : селектор nth-last-of-type () для выбора элемента, который является n -м потомком, указанного тип своего родителя, считая от последнего дочернего элемента. Поддержка браузера Числа в таблице указывают первую версию браузера, полностью поддерживающую селектор. Селектор : nth-последний-ребенок () 4,0 9,0 3,5 3,2 9,6 Синтаксис CSS : nth-last-child ( номер ) { объявления css ; } Демо Другие примеры Пример Четные и нечетные ключевые слова, которые можно использовать для сопоставления дочерних элементов, индекс которых нечетное или четное. Здесь мы указываем два разных цвета фона для нечетных и четных элементов p, отсчет от последнего ребенка: p: nth-last-child (нечетный) { фон: красный; } p: nth-last-child (четный) { фон: синий; } Попробуй сам " Пример По формуле ( an + b ). Описание: a представляет собой размер цикла, n - счетчик (начинается с 0), а b - значение смещения. Здесь мы указываем цвет фона для всех элементов p, индекс которых равен кратно 3, считая от последнего ребенка: p: nth-последний-ребенок (3n + 0) { фон: красный; } Попробуй сам " : последний ребенок | Codrops : last-child - это псевдокласс , который выбирает целевой элемент, если он является последним дочерним элементом какого-либо другого элемента. То есть : last-child будет соответствовать элементу, только если он является последним дочерним элементом своего родителя. Например, предположим, что у вас есть следующий HTML-код: <статья> Lorem Ipsum ... Еще один Lorem Ipsum ...

Название	Цена	Количество	Итого
Кружка	$10.00	5	$50.00
Рубашка	$20.00	5	$100.00
Ножницы	$9.00	4	$36.00
Промежуточный итог	$186.00
Доставка	$12.00
Всего	$198.00

Название	Цена	Количество	Итого
Кружка	$10.00	5	$50.00
Рубашка	$20.00	5	$100.00
Ножницы	$9.00	4	$36.00
Промежуточный итог	$186.00
Доставка	$12.00
Всего	$198.00

Название	Цена	Количество	Итого
Кружка	$10.00	5	$50.00
Рубашка	$20.00	5	$100.00
Ножницы	$9.00	4	$36.00
Промежуточный итог	$186.00
Доставка	$12.00
Всего	$198.00

Название	Цена	Количество	Итого
Кружка	$10.00	5	$50.00
Рубашка	$20.00	5	$100.00
Ножницы	$9.00	4	$36.00
Промежуточный итог	$186.00
Доставка	$12.00
Всего	$198.00

Название	Цена	Количество	Итого
Кружка	$10.00	5	$50.00
Рубашка	$20.00	5	$100.00
Ножницы	$9.00	4	$36.00
Промежуточный итог	$186.00
Доставка	$12.00
Всего	$198.00

Селектор
: nth-последний-ребенок ()	4,0	9,0	3,5	3,2	9,6

Далее будут выбраны и применены стили ко второму абзацу, который в данном случае является последним дочерним элементом своего родителя. p: last-child { стиль шрифта: курсив; } Приведенное выше правило , а не будет стилизовать абзац в следующем примере, потому что это не первый дочерний элемент своего родителя .container . Заголовок Lorem Ipsum ... > Общая информация и примечания Если вы хотите выбрать и стилизовать последний абзац внутри контейнера, независимо от того, является ли он последним дочерним элементом, вы можете использовать селектор : last-of-type , который, как следует из названия, выберет последний элемент его тип, независимо от того, является ли он последним дочерним элементом своего родителя.Например, p: last-of-type выберет абзац, который стоит перед неупорядоченным списком в приведенном выше примере исходного кода, но не будет соответствовать никакому другому абзацу, который стоит перед этим. Псевдокласс : last-child , как и другие псевдоклассы, может быть связан с другими селекторами, такими как : hover , например, для предоставления стилей наведения для выбранного элемента. Он также может быть связан с псевдоэлементами :: before и :: after .См. Примеры и демонстрационные разделы ниже. Примеры Предположим, у вас есть следующая разметка: <статья> Понимание: последний ребенок Это первый абзац. Это второй абзац, последний абзац, но не последний дочерний элемент своего родителя. Это промежуток внутри абзаца. Первый элемент списка Второй элемент списка Третий пункт списка Следующее правило будет соответствовать span внутри второго абзаца, потому что это последний дочерний элемент своего родителя. span: last-child { цвет: серый; } Следующее правило будет соответствовать последнему элементу в неупорядоченном списке выше. li: last-child { текст-оформление: подчеркивание; цвет: темно-розовый; } Следующее правило не будет соответствовать ни одному из вышеперечисленных абзацев, потому что ни один из них не является последним дочерним элементом своего родителя. p: last-child { стиль шрифта: курсив; } Следующее правило заключит span в две круглые скобки, используя псевдоэлементы :: before и :: after . span: last-child :: before { содержание: "("; цвет: темно-розовый; } span: last-child :: after { содержание: ")"; цвет: темно-розовый; } Вы можете увидеть живую демонстрацию в следующем разделе. Поддержка браузера Псевдокласс : last-child поддерживается в Chrome, Firefox, Safari, Opera 9.5+, Internet Explorer 9+, а также на Android и iOS. Комбинация псевдоэлементов CSS, ": after" the ": last-child" Получить ответ на этот вопрос car j'avais besoin précisément de ce que @derek requireait et j'étais déjà allé un peu plus loin avant de voir les réponses ici. Plus précisément, j'avais besoin de CSS qui pourrait également explorer le cas avec exactement deux éléments de liste, où la virgule n'est PAS souhaitée. À titre d'exemple, некоторые подписи авторов que je souhaitais produire ressembleraient à ceci: Автор: Адам Смит. Deux auteurs: Адам Смит и Джейн Доу. Три автора: Адам Смит, Джейн Доу и Фрэнк Андервуд. Les solutions déjà données ici fonctionnent pour un auteur et pour 3 auteurs ou plus, mais ne prennent pas en compte le cas des deux auteurs - où le style "Oxford Comma" (également connu sous le nom de style "Harvard Comma" в определенном смысле вечеринки) ne s'applique pas - c'est-à-dire qu'il ne doit pas y escapeir de virgule avant la consonction. Après un après-midi de bricolage, j'avais offer ce qui suit: Адам Смит Адам Смит Джейн Доу Адам Смит Джейн Доу Фрэнк Андервуд Il affiche les bylinescom je les ai-dessus. En fin de compte, j'ai également dû me débarrasser de tout espace entre les li éléments, afin de contourner une gêne: la propriété inline-block laisserait sinon un espace avant chaque virgule. Или у вас, вероятно, есть альтернативный способ взлома, если вы хотите, чтобы он не задал вопрос, если вы не знаете, что делать, если вы хотите получить ответ. Fiddle ici: http://jsfiddle.net/5REP2/ Псевдоклассы CSS: стилизация элементов на основе их индекса Ниже приводится отрывок из нашей книги CSS Master, написанной Тиффани Б.Коричневый. Копии продаются в магазинах по всему миру, или вы можете купить их в виде электронной книги здесь. CSS также предоставляет селекторы для сопоставления элементов в зависимости от их положения в поддереве документа. Они известны как псевдоклассы , индексируемые потомками, , потому что они полагаются на позицию или порядок элемента, а не на его тип, атрибуты или идентификатор. Их пять: : первенец : последний ребенок : только ребенок : nth-child () : nth-последний-ребенок () : первый ребенок и : последний ребенок Как вы, наверное, догадались по названиям, псевдоклассы : first-child и : last-child позволяют выбирать элементы, которые являются первым или последним дочерними элементами узла (элемента).Как и в случае с другими псевдоклассами, : first-child и : last-child имеют наименьшее количество побочных эффектов при использовании простого селектора. Давайте посмотрим на HTML и CSS ниже: : first-child и: last-child Список фруктов Яблоки Бананы Черника Апельсины Клубника Вы можете увидеть, как это выглядит на рисунке ниже. Поскольку : first-child не соответствует требованиям, оба элемента h3 и первый элемент li имеют ярко-розовый цвет. В конце концов, h3 является первым дочерним элементом body , а li является первым дочерним элементом элемента ul . Но почему остальные элементы li зеленые? Это потому, что : last-child также неквалифицирован, а ul - последний дочерний элемент body . По сути, мы набрали *: первый ребенок и *: последний ребенок . Если мы квалифицируем : first-child и : last-child , добавляя простой селектор, все это имеет больше смысла. Давайте ограничим наш выбор элементами списка. Измените : первый ребенок на li: первый ребенок и : последний ребенок на li: последний ребенок . изображение ниже показывает результат. : nth-child () и : nth-last-child () Возможность выбора первого и последнего дочерних элементов документа - это нормально.Но что, если вместо этого мы захотим выбрать нечетные или четные элементы? Возможно, мы захотим выбрать шестой элемент в поддереве документа или применить стили к каждому третьему элементу. Здесь вступают в игру псевдоклассы : nth-child () и : nth-last-child () . Подобно : not () , : nth-child () и : nth-last-child () также являются функциональными псевдоклассами. Они принимают один аргумент, который должен быть либо: . нечетное ключевое слово четное ключевое слово целое число, такое как 2 или 8, или аргумент в форме An + B , где A - интервал шага, B - смещение, а n - переменная, представляющая положительное целое число. Последний предмет имеет определенную степень сложности. Мы вернемся к этому через минуту. В чем разница между : nth-child () и : nth-last-child () ? Начальная точка: : nth-child () считает вперед, а : nth-last-child () считает назад. Индексы CSS используют счетные числа и начинаются с единицы, а не с нуля. И : nth-child () , и : nth-last-child () полезны для чередования шаблонов.Создание полосатых зебры цветов строк таблицы - идеальный вариант использования. Приведенный ниже CSS дает четным строкам таблицы светлый голубовато-серый фон, результат которого можно увидеть на рисунке ниже: tr: nth-child (even) { фон: rgba (96, 125, 139, 0,1); } Переключение : nth-child на : nth-last-child инвертирует это разбиение, поскольку счет начинается снизу, как показано ниже. Как насчет того, чтобы попробовать несколько сложных примеров с использованием более сложных аргументов? Мы начнем с документа, показанного ниже, который содержит 20 пунктов. С помощью : nth-child () и : nth-last-child () мы можем выбрать одного дочернего элемента в определенной позиции. Мы можем выбрать все дочерние элементы после в определенной позиции, или мы можем выбрать элементы кратно, со смещением. Давайте изменим цвет фона шестого элемента: .item: nth-child (6) { фон: # e91e63; } Это дает нам результат ниже. Но что, если мы хотим выбрать каждый третий элемент? Вот где появляется синтаксис An + B : .item: nth-child (3n) { фон: # e91e63; } Опять же, - это интервал шага. Это почти как множитель для n , который начинается с 1. Итак, если A = 3, то 3n будет соответствовать 3-му, 6-му, 9-му и т. Д. Элементам. Именно это и происходит, как вы можете видеть ниже. Здесь все становится немного интереснее. Мы можем использовать : nth-child () и : nth-last-child () , чтобы выбрать все элементы после определенной точки.Давайте попробуем выбрать все элементы, кроме первых семи: .item: nth-child (n + 8) { фон: # e91e63; } Здесь нет значения шага. В результате n + 8 соответствует каждому элементу n , начиная с восьмого элемента, как показано ниже. Примечание: отрицательные смещения Также допустимы отрицательные значения смещения и диапазона. Использование : nth-child (-n + 8) инвертирует наш выбор и соответствует первым восьми элементам. Мы также можем использовать значения смещения и шага для выбора каждого третьего элемента, начиная с пятого: .item: nth-child (3n + 5) { фон: # e91e63; } Вы можете увидеть результаты этого селектора ниже. : только ребенок Псевдокласс : only-child соответствует элементам, если они являются дочерними элементами only другого элемента. Ниже представлены два неупорядоченных списка. В первом есть один элемент, а во втором - три: Apple Апельсин Банан Малина При использовании li: only-child {color: # 9c27b0;} выберет Apple , поскольку это единственный дочерний элемент в нашем первом списке.Однако ни один из элементов второго списка не соответствует, потому что есть три братья и сестры. Вы можете увидеть, как это выглядит ниже. : пусто Также можно выбрать элементы, у которых нет дочерних элементов, используя псевдокласс : empty . Теперь, когда мы говорим : пустой , мы имеем в виду пустой . Чтобы элемент соответствовал псевдоклассу : empty , он не может содержать ничего другого - даже пробелов. Другими словами, будет соответствовать, а - нет. Иногда редакторы WYSIWYG (что вы видите, то и получаете) вставляют в ваш контент пустые элементы p . Вы можете использовать : empty в сочетании с псевдоклассом : not () , чтобы избежать применения стилей к этим элементам; например p: not (: empty) . Выбор элементов определенного типа по их индексу Псевдоклассы, рассмотренные в предыдущем разделе, соответствуют элементам, если они занимают данную позицию в поддереве документа.Например, p: nth-last-child (2) выбирает каждый элемент p , который является предпоследним элементом своего родителя. В этом разделе мы обсудим типизированных дочерних индексированных псевдоклассов . Эти псевдоклассы также сопоставляют элементы на основе значения их индексов; однако совпадения ограничиваются элементами определенного типа. Выбор пятого элемента p или, например, h3 элементов с четным индексом. Существует пять таких псевдоклассов с именами, которые отражают имена их нетипизированных аналогов: : первый в своем роде : последний тип : только тип : nth-of-type () : nth-last-of-type () Разница между этими псевдоклассами и псевдоклассами, индексируемыми потомками, невелика.Где p: nth-child (5) соответствует пятому элементу, только если это элемент p , p: nth-of-type (5) соответствует всем элементам p , затем находит пятый p элемент среди тех. Начнем с немного другого документа. В нем все еще есть 20 элементов, но некоторые из них - это элементы p , а некоторые - элементы div . Элементы p имеют закругленные углы, как показано ниже. Использование : первый тип , : последний тип и : только тип С помощью : first-of-type мы можем выбрать первый элемент, соответствующий селектору.Как насчет того, чтобы дать нашему первому элементу p салатовый фон: п: первоклассный { фон: # cddc39; } Это будет соответствовать каждому элементу p , который является первым элементом p его родительского элемента, как показано ниже. Псевдокласс : last-of-type работает аналогично, сопоставляя последний такой элемент своего родителя, как показано ниже. Однако : only-of-type будет соответствовать элементу, если это только дочерний элемент этого типа его родительского элемента, как показано ниже. Давайте посмотрим на другой пример использования : first-of-type , но на этот раз с псевдоэлементом. Помните псевдоэлемент :: first-letter из ранее в этой главе? Как вы видели, он создал начальный капитал для каждого элемента, к которому он был применен. Как насчет того, чтобы пойти еще дальше и вместо этого ограничить начальный капитал первым абзацем: p: first-of-type :: first-letter { шрифт: полужирный курсив 3em /.5 засечок; цвет: # 3f51b5; } Как показано на изображении ниже, теперь в нашем абзаце будет начальная заглавная буква, даже если ему предшествует заголовок. Использование : nth-of-type и : nth-last-of-type : nth-of-type () и : nth-last-of-type () также являются функциональными псевдоклассами. Они принимают те же аргументы, что и : nth-child () и : nth-last-child () . Но, как и : первый тип и : последний тип , индексы разрешаются в элементы одного типа.Например, чтобы выбрать первый элемент p и каждый последующий элемент p , мы можем использовать ключевое слово odd с : nth-of-type () : . p: nth-of-type (odd) { фон: # cddc39; цвет: # 121212; } Как вы можете видеть на изображении ниже, это соответствует только нечетным элементам p , а не дочерним элементам с нечетным номером. Аналогично, при использовании : nth-last-of-type (even) выбираются элементы с четными номерами p , но счет начинается с последнего элемента p в документе - в данном случае с элемента 18 (показано ниже ). Если это все еще кажется нечетким, поиграйте с инструментом Nth-Test Пола Мэлоуни или просмотрите примеры на Nth Master. Оба проекта - отличный способ узнать больше об этих псевдоклассах. После того, как папа выбросит последний платеж на содержание ребенка - 80 000 пенни - на лужайке, мама и дочь выплачивают его вперед (NEXSTAR) - подросток из Вирджинии говорит, что они с матерью превращают неприятный момент в возможность сделать добро после того, как ее отец в прошлом месяце выбросил 80 000 пенни на лужайке перед домом. «Мне только исполнилось 18 лет. Когда я учился в среднем классе, мой отец зашел. Он арендовал трейлер », - сказал WTVR выпускник средней школы Эйвери Сэнфорд. «Он подъехал к дому и включил трейлер, чтобы он вывалил все пенни на траву, и моя мама вышла и спросила:« Что ты сбрасываешь у меня во дворе? »Она не знала, кто это. было, пока он не крикнул: «Это ваша последняя выплата алиментов». Семейная камера наблюдения зафиксировала момент, когда внедорожник с прицепом для ландшафтного дизайна сдвинулся с места и выгружал свой груз перед домом. Сэнфорд сказал, что этот момент был особенно неприятным, потому что «он пытается смутить не только мою маму, но и меня и мою сестру». Она сказала, что уже много лет не поддерживает связь со своим отцом. Женщина облицовывает ванную комнату плиткой на гроши на 77 долларов, "которые никто больше не сможет потратить" в широко распространенном видео TikTok После того, как Сэнфорд и ее мать взяли лопату для снега, чтобы подобрать груды пенни, решили, что они отдадут деньги на достойное дело, согласно WTVR, пожертвовав центру домашнего насилия под названием Safe Harbor. «ВАУ! Какая поразительная щедрость и доброта в неудачной ситуации! » «Безопасная гавань» написала в среду в Facebook. Кэти Истер, исполнительный директор Safe Harbor в Ричмонде, сообщила Huffington Post, что подросток и ее мать пожертвовали около 850 долларов, и новости об инциденте вдохновили других пожертвовать еще тысячи, упомянув Сэнфорд и ее мать в памятной записке на чеки. «Во время пандемии участились случаи домашнего насилия, люди, подвергшиеся насилию, особенно с самого начала, оказались запертыми в своих домах со своими обидчиками и не могли уйти», - сказал Истер HuffPo.«С тех пор, как ограничения начали сниматься, это похоже на волну цунами, когда люди обращаются за помощью в то время, когда федеральное финансирование было сокращено, поэтому этот подарок для нас был потрясающим». Лейтенант Мэтью Пека из департамента полиции Хенрико подтвердил Nexstar, что офицеры ответили в дом семьи днем 21 мая. «Полиция Хенрико задокументировала инцидент, однако никаких обвинений предъявлено не было», - сказал Пецка. Сэнфорд сказала, что обнаружение пенни убедило ее в том, что ее решение дистанцироваться от отца, хотя и было болезненным, было правильным, согласно WTVR. «Когда вы делаете такие вещи, вашим детям действительно больно и вредно», - сказал Сэнфорд. «Неважно, молодые они или взрослые, действия ваших родителей всегда будут иметь на вас какое-то влияние». Отец, личность которого не установлена, сказал WTVR по телефону, что потерял контроль над своими эмоциями после почти двух десятилетий разочарования и что он никогда не собирался причинять боль своей дочери. CSS clearfix - автоматическая очистка числа с плавающей запятой с использованием :: after по 17 апреля 2016 г. Класс clearfix - это способ для элемента автоматически очищать левый и правый плавающие точки на его дочерних элементах.Это избавляет от необходимости добавлять дополнительный дочерний элемент для очистки float. Это работает путем добавления псевдоэлемента :: after к элементу контейнера, который имеет стиль очистки floar clear: both . Пример - поплавок остался без очистки поплавка В этом примере нет четкого числа с плавающей запятой для дочерних элементов внешнего div. Это вызвало некоторые нежелательные эффекты. Первый Второй div div нижнего колонтитула Пример - поплавок влево и очистка поплавка с использованием дополнительного дочернего элемента В этом примере добавляется дополнительный дочерний div (с clear: both) внутри внешнего div. Первый Второй div div нижнего колонтитула Пример - поплавок влево и очистка поплавка с помощью clearfix В этом примере используется взлом clearfix. Здесь внешний div имеет class = clearfix.Класс clearfix имеет псевдоэлемент :: after, который очищает как левый, так и правый плавающий элемент. Обратите внимание: если вам нужна поддержка IE8, вы можете использовать: after вместо :: after. Первый Второй div div нижнего колонтитула .No related posts.