كيفية استهداف عناصر CSS محددة؟

[Denis_Heraud]

أريد استهداف عنصر محدد لتعديل خصائصه (على سبيل المثال):

.d-button-label { display: none !important;}

لكنني أدركت بعد ذلك أنه يُستخدم في كل مكان في Discourse، وليس فقط في عنصر الإضافة الذي كنت أحاول تخصيصه. إذن، كيف يمكنني استهداف تلك التسمية المحددة؟

[Johani (Joe)]

انتقل للأعلى في شجرة HTML وابحث عن عنصر أب يحتوي على فئة (class) فريدة.

يمكنك بعد ذلك إضافة العنصر الأب إلى المحدد (selector) الخاص بك على النحو التالي

.parent-class .child-class {
  display: none;
}

يمكنك أيضًا إضافة فئات أب أكثر تفردًا على النحو التالي

.grandparent-class .parent-class .child-class {
  display: none;
}

إذا لزم الأمر.

سيبدو الشيء نفسه في SCSS كالتالي

.grandparent-class {
  .parent-class {
    .child-class {
      display: none;
    }
  }
}

ينبغي أن يلغي هذا الحاجة إلى استخدام !important

[Denis_Heraud]

شكرًا لك يا @Johani! لقد علّمتني شيئًا جديدًا سيكون مفيدًا جدًا!