كيف يمكنني استهداف المواضيع غير المحلولة باستخدام CSS؟

ما هي مُحدِّدات CSS (CSS selector(s)) لتغيير نمط المواضيع غير المحلولة؟

إعجاب واحد (1)

مرحباً دان :wave:

في قائمة المواضيع، سيكون هذا:

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

في صفحة الموضوع، لا يوجد فئة محددة يمكن استهدافها.

4 إعجابات

شكرًا، لقد نجح الأمر!

هناك تحذير واحد، مشابه لـ هذه المشكلة، وهو أن البحث عن غياب الفئة status-solved يعني أن المواضيع من الفئات التي لا تدعم “تم الحل” سيتم تمييزها أيضًا. في حالتنا، أضفت فئة ثانية إلى المحدد لاستهداف فئة الدعم فقط:

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

هل هناك حل أكثر عمومية، على سبيل المثال إذا كانت هناك فئات “تم الحل” أخرى، بدلاً من تكرار المحدد؟

إعجاب واحد (1)

حاولت معرفة شرط حرف بدل لأي فئة مع تمكين الحلول ولكن لم أتمكن. ولكن يمكنك دمج جميع الفئات ذات الصلة في مقتطف كود واحد:

 /* Highlight unsolved topics */

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

أو يمكن للمرء إنشاء مكون سمة ويكون لديه إعداد لإضافة أي فئات يريد تطبيقها. أشك في أنه قد تكون هناك طريقة لاستهداف الفئات التي تم تمكين الحلول فيها ولكن لا يبدو أنني أستطيع معرفة ذلك. :thinking:

لست متأكدًا مما إذا كان بإمكاننا تحديد المواضيع التي تنتمي إلى فئة “قابلة للحل” في قائمة المواضيع.

إذا كنت لن تقوم بتغيير إعداد الفئة كل أسبوع، يمكنك تعديل الكود الذي كتبته أنت و @Lilly ولكن أضف حلقة واجعله أسهل في القراءة والصيانة. سيظل يستخدم فئات الفئة.

يمكنك إعادة استخدام الحل المقدم هنا لهذا الغرض:

إعجاب واحد (1)

مرحباً :wave:

لقد قمت بإنشاء مكون سمة لإضافة فئة .solvable-topic إلى قائمة المواضيع القابلة للحل.

بعد تثبيت مكون السمة هذا، يمكنك إضافة CSS بسيط لتحقيق ذلك. :slightly_smiling_face:

.topic-list-item {
  &.solvable-topic {
    &:not(.status-solved) {
      background: red;
    }
  }
}
5 إعجابات