Wie formatiere ich das letzte untergeordnete Element mit einem bestimmten Klassennamen, indem ich nur CSS verwende?

Auswählen des letzten untergeordneten Elements mit einem bestimmten Klassennamen in CSS

Auf der Suche nach einer CSS-Lösung, um das letzte untergeordnete Element mit einem bestimmten anzusprechen Beim Klassennamen stellt die Frage eine Herausforderung dar, da die Anzahl der untergeordneten Elemente variieren kann. Daraus ergibt sich die Sorge, dass nth-child() möglicherweise nicht ausreicht. Auch JavaScript ist als Option ausgeschlossen.

Die Lösung liegt in den :last-of-type-Pseudoklassen- und Attributselektoren.

CSS Code:

[class~="list"]:last-of-type {
    background-color: #000;
}

Erklärung:

• [class~="list"]: Wählt Elemente aus, die haben den Klassennamen „list“ als Teil ihres Klassenattributwerts (d. h. nicht unbedingt als einzigen). Klasse).
• :last-of-type: Wählt Elemente aus, die das letzte untergeordnete Element ihres Typs sind (d. h. das letzte li-Element mit der Klasse „list ").

Durch die Kombination dieser Selektoren wendet die Regel einen schwarzen Hintergrund auf das letzte untergeordnete Element an, das den Klassennamen „list“ hat, unabhängig davon, ob dies der Fall ist andere Klassen oder wie viele untergeordnete Elemente vorhanden sind.

Beispiel:

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list extra-class">test3</li>
</ul>

In diesem Beispiel gilt die CSS-Regel, obwohl das dritte untergeordnete Element eine zusätzliche Klasse hat wird weiterhin den schwarzen Hintergrund darauf anwenden, da es das letzte untergeordnete Element mit dem Klassennamen „list“ ist.

Attribut Selektoren:

Attributselektoren ermöglichen es uns, Elemente basierend auf ihren Attributen, einschließlich Klassennamen, anzusprechen. Mit dem class~-Selektor können wir Elemente auswählen, deren Klassenname ein bestimmtes Wort enthält (z. B. wenn wir mehrere Klassen mit den Namen „list-item-1“, „list-item-2“ hätten. usw.).

Ressourcen:

• [CSS-Attribut Selektoren](http://css-tricks.com/attribute-selectors/)
• [W3Schools-Attributselektoren](http://www.w3schools.com/css/css_attribute_selectors.asp)

Das obige ist der detaillierte Inhalt vonWie formatiere ich das letzte untergeordnete Element mit einem bestimmten Klassennamen, indem ich nur CSS verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!