Come potrei indirizzare argomenti irrisolti con CSS?

Sviluppatore
,
1

Quali sarebbero i selettori CSS per cambiare lo stile degli argomenti non risolti?

1 Mi Piace
2

Ciao Dan :wave:

Su una lista di argomenti, sarebbe questo:

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

image
image1099Ă—795 69.4 KB

Su una pagina di argomento, non c’è una classe specifica da indirizzare.

4 Mi Piace
3

Grazie, ha funzionato!

Un avvertimento, simile a questo problema, è che cercare l’assenza della classe status-solved significa che verranno evidenziati anche gli argomenti delle categorie che non hanno Solved abilitato. Nel nostro caso ho aggiunto una seconda classe al selettore per colpire solo la categoria di supporto:

/* Evidenzia argomenti irrisolti */
.topic-list-item.category-support:not(.status-solved) {
    background: rgba(255,192,203,.2);
}

Esiste una soluzione più generale, ad esempio se esistono più categorie Solved, anziché ripetere il selettore?

1 Mi Piace
4

Ho provato a capire una condizione jolly per qualsiasi categoria con risolto abilitato ma non ci sono riuscito. ma puoi combinare tutte le categorie pertinenti in un unico snippet di codice:

 /* Evidenzia argomenti irrisolti */

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

oppure si potrebbe creare un componente tematico e avere un’impostazione per aggiungere le categorie che si desidera applicare. sospetto che ci possa essere un modo per puntare alle categorie con risolto abilitato ma non riesco a capirlo. :thinking:

5

Non sono sicuro che possiamo definire quali argomenti appartengano a una categoria “risolvibile” nell’elenco degli argomenti.

Se non modificherai l’impostazione della categoria ogni settimana, puoi modificare il codice che tu e @Lilly avete scritto, ma aggiungere un ciclo e renderlo più facile da leggere e mantenere. Utilizzerà ancora le classi di categoria.

Puoi riutilizzare la soluzione fornita qui per questo intento:

1 Mi Piace
6

Ciao :wave:

Ho creato un componente tema per aggiungere la classe .solvable-topic agli argomenti risolvibili nell’elenco degli argomenti.

Dopo aver installato questo componente tema, puoi aggiungere un semplice CSS per ottenerlo. :slightly_smiling_face:

.topic-list-item {
  &.solvable-topic {
    &:not(.status-solved) {
      background: red;
    }
  }
}
5 Mi Piace