Farbliche Hervorhebung von angepinnten Themen und Ankündigungen innerhalb der Themenliste

CSS

/* Letzte Ankündigung farblich absetzen */
.tabularListRow:has(.wbbThreadAnnouncement):not(:has(+ .tabularListRow .wbbThreadAnnouncement)) {
	border-bottom: 2px solid red;
}

/* Letztes angepinntes Thema farblich absetzen */
.tabularListRow:has(.wbbThreadSticky):not(:has(+ .tabularListRow .wbbThreadSticky)) {
	border-bottom: 2px solid green;
}

/* Standard Devider ausblenden */
.tabularListRow.divider + li:not(.divider) {
	border-top: none;
}

Code

/* Letzte Ankündigung farblich absetzen */
.tabularListRow:has(.wbbThreadAnnouncement):not(:has(+ .tabularListRow .wbbThreadAnnouncement)) {
	border-bottom: 2px solid red;
}

/* Letztes angepinntes Thema farblich absetzen */
.tabularListRow:has(.wbbThreadSticky):not(:has(+ .tabularListRow .wbbThreadSticky)) {
	border-bottom: 2px solid green;
}

/* Standard Devider ausblenden */
.tabularListRow.divider + li:not(.divider) {
	border-top: none;
}

Alles anzeigen

Ankündigungen und angepinnte Themen werden jeweils als Gruppe am Anfang der Themenliste angezeigt. Mit dem folgenden CSS lässt sich das Ende jeder Gruppe visuell hervorheben, z. B. mit einem farbigen Trennstrich.

CSS kennt kein :last-of-class. Das letzte Element einer bestimmten Klasse lässt sich daher nicht direkt ansprechen. Es gibt aber einen Workaround.

Idee

Anstatt das letzte Element direkt zu wählen, wählt man alle Elemente der Gruppe und schließt dann alle aus, auf die noch ein weiteres folgt. Übrig bleibt genau das letzte.

Syntax

CSS

.zeile:has(.meine-klasse):not(:has(+ .zeile .meine-klasse)) {
	/* Styles */
}

:has(.meine-klasse) alle Zeilen, die ein Element mit .meine-klasse enthalten
+ .zeile das direkt nachfolgende Geschwisterelement
:not(:has(...)) schließt alle Zeilen aus, auf die noch eine weitere folgt

Richtlinien WSC CSS Toolbox

Die WSC CSS Toolbox lebt vom Community-Gedanken. Um eine schnelle Freischaltung zu gewährleisten und Urheberrechte zu wahren, beachten wir ein faires Miteinander: Kopiere keine Inhalte ungefragt aus dem WoltLab-Forum. Eingereichte Snippets müssen entweder von dir selbst stammen oder mit dem Einverständnis des Autors geteilt werden (am besten trägt der Ersteller sein Snippet selbst ein). Allgemeine Standard-Snippets sind davon ausgenommen und dürfen frei eingepflegt werden.

Titelbild: Nutze ein aussagekräftiges Bild, das das Ergebnis deines CSS-Snippets direkt zeigt. Zusätzliche Detailbilder kannst du als Dateianhang in der Beschreibung hinterlegen.

Kurzbeschreibung: Formuliere einen kurzen, zielführenden Satz, der die Funktion des Snippets exakt auf den Punkt bringt.

CSS-Code: Füge den vollständigen und sauber formatierten CSS-Code direkt in das dafür vorgesehene Code-Feld ein.

Beschreibung: Erkläre präzise, was das Snippet bewirkt, welche Elemente beeinflusst werden und welche Werte (z. B. Farben oder Abstände) individuell anpassbar sind.

WSC-Version: Ordne deinen Eintrag zwingend über die Label-Auswahl der passenden WoltLab Suite Version zu, damit das Snippet leicht gefunden wird.