CSS: last-child des parent

:last-child Super funktioniert, wenn alle "Kinder" die Elemente sind die gleichen (dh: alle <p>'s oder alle <li>'s und die Regel angewendet wird, um diese Art von Kind.

Aber wie kann ich mithilfe von CSS-wählen Sie das Letzte "Kind" - element innerhalb einer übergeordneten enthält unterschiedliche Elemente?

Zum Beispiel, in diesem Beispiel, wie könnte ich eine Regel anwenden, um die .parent wählen Sie das Letzte Objekt im inneren (die div)?

CSS:

.parent:last-child {
  background-color: red;
 }

HTML:

<div class="parent">
  
  <p>First child</p>
  <input type="text" placeholder="Second child" />
  <div>Third child</div>
  
</div>

  • Die Regel, die Sie haben, ist auf der Suche nach wählen Sie ein element mit der Klasse parent das ist das Letzte Kind von irgendeinem anderen element. Fügen Sie ein Leerzeichen zwischen Ihnen.
  • Lister: Oder einfach nur .parent>:last-child (Ihre Selektor entsprechen Körper)
InformationsquelleAutor JROB | 2017-01-23
  1. 19

    Können Sie .parent > *:last-child oder nur .parent > :last-child

    Einem Sternchen (*) ist der universal-Selektor für CSS. Es entspricht einem Einzelzimmer
    element beliebigen Typs. Das weglassen der Stern mit einfachen Selektoren hat
    den gleichen Effekt.

    CSS:

    .parent > *:last-child {
  background-color: red;
}

    HTML:

    <div class="parent">
  <p>First child</p>
  <input type="text" placeholder="Second child" />
  <div>Third child</div>
</div>

    • Das ist toll. Danke!!!
    InformationsquelleAutor Nenad Vracar
Schreibe einen Kommentar