Wie würde ich ungelöste Themen mit CSS ansprechen?

Entwickler
,
1

Welcher CSS-Selektor würde den Stil ungelöster Themen ändern?

1 „Gefällt mir“
2

Hallo Dan :wave:

Auf einer Themenliste wäre es dies:

.topic-list-item:not(.status-solved) {
    background: rgba(255,192,203,.2);
}

image
image1099×795 69.4 KB

Auf einer Themenseite gibt es keine spezifische Klasse, die angesprochen werden kann.

4 „Gefällt mir“
3

Danke, das hat funktioniert!

Eine Einschränkung, ähnlich wie bei diesem Problem, ist, dass die Suche nach dem Fehlen der Klasse status-solved dazu führt, dass auch Themen aus Kategorien hervorgehoben werden, bei denen Gelöst nicht aktiviert ist. In unserem Fall habe ich dem Selektor eine zweite Klasse hinzugefügt, um nur die Support-Kategorie anzusprechen:

/* Ungelöste Themen hervorheben */
.topic-list-item.category-support:not(.status-solved) {
    background: rgba(255,192,203,.2);
}

Gibt es eine allgemeinere Lösung, z. B. wenn es mehr Gelöst-Kategorien gibt, anstatt den Selektor zu wiederholen?

1 „Gefällt mir“
4

Ich habe versucht, eine Wildcard-Bedingung für eine beliebige Kategorie mit aktivierter Lösung zu finden, aber das ist mir nicht gelungen. Sie können jedoch alle relevanten Kategorien in einem Code-Snippet kombinieren:

 /* Ungelöste Themen hervorheben */

.topic-list-item.category-support, 
.topic-list-item.category-another_category,
.topic-list-item.category-yet_another_category:not(.status-solved) {
    background: rgba(255,192,203,.2);
}

Alternativ könnte man eine Theme-Komponente erstellen und eine Einstellung haben, um beliebige Kategorien hinzuzufügen, auf die sie angewendet werden sollen. Ich vermute, es gibt eine Möglichkeit, Kategorien mit aktivierter Lösung anzusprechen, aber ich kann es einfach nicht herausfinden. :thinking:

5

Ich bin mir nicht sicher, ob wir ermitteln können, welche Themen in die Kategorie „lösbar“ auf der Themenliste fallen.

Wenn Sie die Kategorieeinstellung nicht jede Woche ändern werden, können Sie den Code, den Sie und @Lilly geschrieben haben, modifizieren, aber eine Schleife hinzufügen und ihn leichter lesbar und wartbar machen. Er wird immer noch die Kategorienklassen verwenden.

Sie können die hier für diese Absicht bereitgestellte Lösung wiederverwenden:

1 „Gefällt mir“
6

Hallo :wave:

Ich habe eine Theme-Komponente erstellt, die lösbaren Themen in der Themenliste die Klasse .solvable-topic hinzufügt.

Nach der Installation dieser Theme-Komponente können Sie mit einfachem CSS das gewünschte Ergebnis erzielen. :slightly_smiling_face:

.topic-list-item {
  &.solvable-topic {
    &:not(.status-solved) {
      background: red;
    }
  }
}
5 „Gefällt mir“