: последний ребенок работает не так, как ожидалось?

Проблема заключается в этом CSS и HTML. Вот ссылка на jsFiddle с образцом кода.

HTML

<ul>
    <li class"complete">1</li>
    <li class"complete">2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS

li.complete:last-child {
    background-color:yellow;
}

li.complete:last-of-type {
    background-color:yellow;
}

Разве ни одна из этих строк CSS не нацелена на элемент last li с "полным" классом?

Этот запрос в jQuery не нацелен на него:

$("li.complete:last-child");

Но это делает:

$("li.complete").last();

li {
  background-color: green;
}
li.complete:first-child {
  background-color: white;
}
li.complete:first-of-type {
  background-color: red;
}
li.complete:last-of-type {
  background-color: blue;
}
li.complete:last-child {
  background-color: yellow;
}

<ul>
  <li class="complete">1</li>
  <li class="complete">2</li>
  <li>3</li>
  <li>4</li>
</ul>

Ответ 1

Селектор last-child используется для выбора последнего дочернего элемента родителя. Он не может использоваться для выбора последнего дочернего элемента с определенным классом под заданным родительским элементом.

Другая часть составного селектора (которая прикреплена до :last-child) указывает дополнительные условия, которые последний дочерний элемент должен удовлетворять по порядку, чтобы он был выбран. В приведенном ниже фрагменте вы увидите, как выбранные элементы различаются в зависимости от остальной части составного селектора.

.parent :last-child{ /* this will select all elements which are last child of .parent */
  font-weight: bold;
}

.parent div:last-child{ /* this will select the last child of .parent only if it is a div*/
  background: crimson;
}

.parent div.child-2:last-child{ /* this will select the last child of .parent only if it is a div and has the class child-2*/
  color: beige;
}

<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div>Child w/o class</div>
</div>
<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child-2'>Child w/o class</div>
</div>
<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <p>Child w/o class</p>
</div>

Ответ 2

: last-child не будет работать, если элемент не является элементом VERY LAST

В дополнение к ответу Гарри, я думаю, что важно добавить/подчеркнуть, что: last-child не будет работать, если элемент не является элементом VERY LAST в контейнере. По какой-то причине мне потребовались часы, чтобы понять это, и хотя ответ Гарри был очень подробным, я не смог извлечь эту информацию из "Селектор последнего ребенка используется для выбора последнего дочернего элемента родителя".

Предположим, это мой селектор: a:last-child {}

Это работает:

<div>
    <a></a>
    <a>This will be selected</a>
</div>

Это не:

<div>
    <a></a>
    <a>This will no longer be selected</a>
    <div>This is now the last child :'( </div>
</div>

Это не потому, что элемент не является последним элементом внутри своего родителя. a

Это может быть очевидно, но это было не для меня...

Ответ 3

Я сталкиваюсь с подобной ситуацией. Я бы хотел, чтобы фон последнего .item желтым в элементах, которые выглядят как...

<div class="container">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  ...
  <div class="item">item x</div>
  <div class="other">I'm here for some reasons</div>
</div>

Я использую nth-last-child(2) для достижения этого.

.item:nth-last-child(2) {
  background-color: yellow;
}

Это странно для меня, потому что nth-last-child элемента предположительно является вторым из последнего элемента, но это работает, и я получил результат, как и ожидал. Я нашел этот полезный трюк из CSS Trick

Ответ 4

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

<ul>
    <li class="complete" id="one">1</li>
    <li class="complete" id="two">2</li>
    <li>3</li>
    <li>4</li>
</ul>


li.complete#one{background-color:yellow;} 

li.complete#two{background-color:red;}

предоставить идентификатор вашему списку, а затем указать стиль или что-то еще, как вы хотите