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 ...