مرحبًا @b481
ما تبحث عنه يُعرف بـ “محدد CSS” (أو ببساطة “المحدد” للاختصار). تُستخدم محددات CSS لـ “البحث” (أو تحديد، بطبيعة الحال) عنصر DOM الذي ترغب في تنسيقه.
على سبيل المثال، من المكان الذي أكتب منه الآن، سأبحث عن المحدد الخاص باسم مستخدمك في محرر الرسائل (كمثال فقط).
ما نفعله هو وضع الماوس فوق العنصر (اسم المستخدم b481 الخاص بك في المحرر)، ثم نضغط بزر الماوس الأيمن لتظهر قائمة منبثقة تحتوي على عنصر القائمة “فحص” (Inspect).
انقر على “فحص” وسيظهر لك وحدة تحكم المطور (أنا الآن في Chrome على نظام macOS)؛ وبفضل الحظ الجيد، سيتم تمييز العنصر الذي نريده.
إذا نقرت بزر الماوس الأيمن فوق العنصر المميز في وحدة التحكم، فسترى عنصر قائمة “نسخ” → “نسخ المحدد” (Copy selector).
إذا اخترت ذلك ونسخت المحدد، فستحصل في هذا المثال على:
#ember433 > span > a
هذا ليس محددًا جيدًا حقًا لأن #ember433 يتم تعيينه بواسطة Ember، ولكن يمكنك تحريك الماوس فوق العناصر في وحدة التحكم، وسيتم تمييزها في كل من الصفحة المستهدفة ووحدة التحكم. الخبر السار هو أننا اقتربنا من الهدف بسرعة وسهولة.
يمكنك بعد ذلك العثور على العنصر الذي ترغب في إخفائه، وفي هذا المثال، يمكنك النقر بزر الماوس الأيمن مرة أخرى على العنصر (هذا المثال) واختبار ذلك عن طريق اختيار “إضافة سمة” (add attribute) من القائمة أسفل الماوس لاختبار محددنا.
لقد قمت بذلك كمثال في هذه اللقطة:
والآن، تم إخفاء ذلك العنصر بمعرف ‘b481’ في هذا الجزء من DOM…
إذن، نعلم في هذه الحالة أنه إذا استخدمنا CSS:
span.action-title{
display:none;
}
فيمكننا إضافته إلى موضوعنا (theme) وسيتم إخفاء ذلك العنصر.
في هذه الحالة، يجب عليك التحقق مما إذا كان هناك أكثر من عنصر واحد في الصفحة يحمل نفس المحدد، كما يجب أن تتأكد من أن المحدد الذي اخترته لن يكون جشعًا في تحديد عناصر في صفحات أخرى قد لا ترغب في إخفائها.
كلما كان المحدد أكثر تحديدًا، كان ذلك أفضل.
على سبيل المثال، في هذه الحالة، يمكننا جعله أكثر تحديدًا عن طريق تحديد أن محددنا هو عنصر تابع لعنصر أب، في هذه الحالة (لم يتم اختباره):
div.compose-action-title > span.action-title{
display:none;
}
يمكنك أن ترى أننا أصبحنا أكثر تحديدًا؛ وفي هذه المرحلة، يجب أن تكون لديك فكرة جيدة عن كيفية البحث عن العناصر التي ترغب في تعديلها.
استمتع بالبحث!
ملاحظة أخيرة:
يمكنك استخدام JavaScript وjQuery لتحديد العناصر، لكنني وجدت أنه في تطبيقات الصفحة الواحدة (SPA) مثل Discourse/Ember، تعمل محددات CSS بشكل جيد، على الأقل بالنسبة لي. أميل إلى استخدام محددات JavaScript فقط عندما أحتاج إلى التنقل في DOM بطريقة “معقدة” (وهو ما يمكن أن يكون ممتعًا أيضًا).
أتمنى أن يكون هذا مفيدًا.
انظر أيضًا: