: letztes Kind arbeitet nicht wie erwartet?

Das Problem liegt in diesem CSS und HTML. Hier ist ein Link zu jsFiddle mit dem Beispielcode.

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;
}

Sollte nicht eine dieser CSS-Zeilen auf das letzte li-Element mit der Klasse "complete" abzielen ?

Diese Abfrage in jQuery zielt auch nicht darauf ab:

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

Aber dieser tut:

$("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>

Mit dem last-childSelektor wird das letzte untergeordnete Element eines übergeordneten Elements ausgewählt. Es kann nicht verwendet werden, um das letzte untergeordnete Element mit einer bestimmten Klasse unter einem bestimmten übergeordneten Element auszuwählen.

Der andere Teil des zusammengesetzten Selektors (der vor dem angehängt ist :last-child) gibt zusätzliche Bedingungen an, die das letzte untergeordnete Element erfüllen muss, damit es ausgewählt werden kann. Im folgenden Snippet sehen Sie, wie sich die ausgewählten Elemente je nach Rest des zusammengesetzten Selektors unterscheiden.

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

Um Ihre Frage zu beantworten, wird im Folgenden das letzte untergeordnete liElement mit der Hintergrundfarbe Rot formatiert.

li:last-child{
    background-color: red;
}

Aber der folgende Selektor würde für Ihr Markup nicht funktionieren, da der last-childnicht das hat class='complete', obwohl es ein ist li.

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

Es hätte funktioniert, wenn (und nur wenn) der letzte liin Ihrem Markup auch hatte class='complete'.

So beantworten Sie Ihre Anfrage in den Kommentaren :

@ Harry Ich finde es ziemlich seltsam, dass: .complete: last-of-type nicht funktioniert, aber .complete: first-of-type funktioniert, unabhängig von der Position, in der es sich um das übergeordnete Element handelt. Danke für Ihre Hilfe.

Der Selektor .complete:first-of-typearbeitet in der Geige, weil er (dh das Element mit class='complete') immer noch das erste Element des Typs liinnerhalb des übergeordneten Elements ist . Versuchen Sie, <li>0</li>als erstes Element unter dem hinzuzufügen, ulund Sie werden feststellen, dass first-of-typeauch Flops. Dies liegt daran, dass die Selektoren first-of-typeund last-of-typedas erste / letzte Element jedes Typs unter dem übergeordneten Element auswählen.

Weitere Informationen zur Funktionsweise des Selektors finden Sie in der Antwort von BoltClock in diesem Thread. Das ist so umfassend wie es nur geht :)

: last-child funktioniert nicht, wenn das Element nicht das SEHR LETZTE Element ist

Zusätzlich zu Harrys Antwort denke ich, dass es wichtig ist, Folgendes hinzuzufügen / hervorzuheben: Das letzte Kind wird nicht funktionieren, wenn das Element nicht das SEHR LETZTE Element in einem Container ist. Aus irgendeinem Grund habe ich Stunden gebraucht, um das zu realisieren, und obwohl Harrys Antwort sehr gründlich ist, konnte ich diese Informationen nicht aus "Der Selektor für das letzte Kind wird verwendet, um das letzte untergeordnete Element eines Elternteils auszuwählen" extrahieren .

Angenommen, dies ist mein Selektor: a:last-child {}

Das funktioniert:

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

Das geht nicht:

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

Dies liegt nicht daran, dass das aElement nicht das letzte Element in seinem übergeordneten Element ist.

Es mag offensichtlich sein, aber es war nichts für mich ...

Ich stoße auf eine ähnliche Situation. Ich möchte, dass der Hintergrund des Letzten .itemin den Elementen, die wie ... aussehen, gelb ist.

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

Ich benutze es nth-last-child(2), um es zu erreichen.

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

Es ist seltsam für mich, weil das n-te Kind des Gegenstands vermutlich das zweite des letzten Gegenstands ist, aber es funktioniert und ich das Ergebnis wie erwartet erhalten habe. Ich habe diesen hilfreichen Trick von CSS Trick gefunden