CSS last-child селектор: выбрать последний элемент определенного класса, а не последний потомок внутри родителя?

176

<div class="commentList">
   <article class="comment " id="com21"></article>
   <article class="comment " id="com20"></article>
   <article class="comment " id="com19"></article>
   <div class="something"> hello </div>
</div>

Я хочу выбрать #com19?

.comment {
    width:470px;
    border-bottom:1px dotted #f0f0f0;
    margin-bottom:10px;
}

.comment:last-child {
    border-bottom:none;
    margin-bottom:0;
}

Это не работает до тех пор, пока у меня есть еще один div.somethingпоследний фактический ребенок в commentList. Можно ли использовать селектор последнего ребенка в этом случае, чтобы выбрать последнее появление article.comment?

jsFiddle

html css css-selectors матовый
источник

229

:last-childработает только тогда, когда рассматриваемый элемент является последним дочерним элементом контейнера, а не последним из определенного типа элемента. Для этого вы хотите:last-of-type

http://jsfiddle.net/C23g6/3/

Согласно комментарию @ BoltClock, это проверка только последнего articleэлемента, а не последнего элемента с классом .comment.

body {
  background: black;
}

.comment {
  width: 470px;
  border-bottom: 1px dotted #f0f0f0;
  margin-bottom: 10px;
}

.comment:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

<div class="commentList">
  <article class="comment " id="com21"></article>

  <article class="comment " id="com20"></article>

  <article class="comment " id="com19"></article>

  <div class="something"> hello </div>
</div>

Развернуть фрагмент

Крис
источник

146

Тем не менее, он не смотрит на класс, а только на тип, поэтому, если у вас не будет статей с тем же классом, вы получите неожиданные результаты.

BoltClock

1

Работает нормально. Однако, если нам нужно, чтобы они сузили элементы по классам, это не сработает снова. jsfiddle.net/aliemreeee/a4H7f/2

Али Эмре Чакмакоглу

12

основываясь на этих ответах, я предполагаю, что нет никакого способа выбрать last-of-class.

Toobulkeh

14

только когда CSS-селекторы уровня 4 будут приняты и реализованы браузерами, где у вас будет доступ :nth-match(selector)и :nth-last-match(selector). Смотрите w3.org/TR/selectors4 для более подробной информации.

Крис

1

Вернее :nth-last-child(An+B of selector), как это :nth-last-match()было отброшено задолго до этого, но они не удосужились обновить WD. См stackoverflow.com/questions/21167159/css-nth-match-doesnt-work/...

BoltClock

6

Если вы перемещаете элементы, вы можете изменить порядок

т.е. float: right; вместоfloat: left;

А затем используйте этот метод, чтобы выбрать первого ребенка в классе.

/* 1: Apply style to ALL instances */
#header .some-class {
  padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
  padding-right: 20px;
}

Это фактически применяет класс к экземпляру LAST только потому, что он теперь в обратном порядке.

Вот рабочий пример для вас:

<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
  border: 1px solid red;
  padding-right: 0;
}
#header .some-class~.some-class {
  border: 0;
  padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
  <img src="some_image" title="Logo" class="lfloat no-border"/>
  <ul class="some-class rfloat">
    <li>List 1-1</li>
    <li>List 1-2</li>
    <li>List 1-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 2-1</li>
    <li>List 2-2</li>
    <li>List 2-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 3-1</li>
    <li>List 3-2</li>
    <li>List 3-3</li>
  </ul>
  <img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>

Ozzy
источник

Обратите внимание, что это не сработает, если плавающие элементы помещаются на следующую строку (т. Е. Недостаточно горизонтального пространства, чтобы плавать вправо / влево)

Оззи

.some-class~.some-classотлично работает для меня, когда повторяются только 2 элемента.

Меломан

4

Я думаю, что самый правильный ответ: использовать :nth-child(или, в данном конкретном случае, его аналог :nth-last-child). Большинство знает этот селектор только по его первому аргументу, чтобы захватить диапазон элементов на основе вычисления с n, но он также может принимать второй аргумент "из [любого селектора CSS]".

Ваш сценарий может быть решен с помощью этого селектора: .commentList .comment:nth-last-child(1 of .comment)

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

Для дальнейшего чтения:

hurrtz
источник

1

Что-то, что я думаю, должно быть прокомментировано здесь, который работал для меня:

Используйте :last-childнесколько раз в необходимых местах, чтобы он всегда получал последний из последних.

Возьмите это к примеру:

.page.one .page-container .comment:last-child {
  color: red;
}
.page.two .page-container:last-child .comment:last-child {
  color: blue;
}

<p> When you use .comment:last-child </p>
<p> you only get the last comment in both parents </p>

<div class="page one">
  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>

  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>
</div>

<p> When you use .page-container:last-child .comment:last-child </p>
<p> you get the last page-container's, last comment </p>

<div class="page two">
  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>

  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>
</div>

Развернуть фрагмент

Друг
источник

0

Как насчет этого решения?

div.commentList > article.comment:not(:last-child):last-of-type
{
    color:red; /*or whatever...*/
}

lsblsb
источник

@lsblsb, Вы используете articleздесь, поэтому: not (: last-child) не является необходимым для данного примера.

Евгений Масленков

Что делать, если элемент с классом somethingне существует в исходном HTML и динамически вставляется hover? Не подойдет ли это решение?

Fr0zenFyr

-1

если последний тип элемента тоже article, last-of-type он не будет работать должным образом.

возможно я не очень понимаю, как это работает.

демонстрация

Аллен
источник

CSS last-child селектор: выбрать последний элемент определенного класса, а не последний потомок внутри родителя?

Ответы: