ما هو محدد سليل CSS؟

click fraud protection

يعد تصميم نص ومحتوى موقع الويب باستخدام رمز HTML "جزءًا" واحدًا فقط من المبنى الواجهة الأمامية لموقع الويب. جزء كبير آخر من هذه العملية هو إنشاء النمط المرئي الذي تحكمه قواعد CSS.

عندما نقوم ببناء موقع ويب جديد أو إجراء تغييرات كبيرة في التخطيط لموقع موجود ، فإننا نريد حتمًا أن تظهر أجزاء معينة من موقعنا بطريقة معينة. للقيام بذلك ، من المهم فهم كيفية استخدام المتنوع موحد CSS، مثل محدد CSS التابع. يسمح مُجمع CSS لأقسام كبيرة من موقع الويب بتلقي نفس تغييرات النمط مرة واحدة.

ما هو محدد سليل CSS؟

محدد التوابع CSS هو واحد من أربعة أدوات دمج مختلفة لـ CSS. عند إضافة مسافة واحدة () بين محددين ، سيتم تطبيق نفس عناصر النمط أيضًا على المحدد الثاني ، نظرًا لأن المتفردين يشاركون نفس المحدد الأول.

لفهم محدد تابع لـ CSS ، عليك أولاً أن تقوم بذلك فهم محددات CSS. أفضل طريقة لوصف المحدد هو أنه عامل CSS يحدد جزء HTML الذي تحاول تصميمه. يطلق عليه محدد لأنه "يختار" أي جزء من HTML يشترك في نفس عامل التشغيل مثل أصل CSS.

الأمثلة الشائعة لهذه العوامل هي:

شعبة

هذه علامة تحدد قسمًا من HTML ، والذي يمكن أن يتضمن أشياء مثل الفقرات والمحتوى ، أو:

instagram viewer
لي

وهي قائمة مرتبة. علامة أخرى مماثلة هي:

ماي

يؤدي هذا إلى إنشاء قائمة غير مرتبة. يشار إلى الأنماط الأكثر تعقيدًا أيضًا باسم المحددات. ببساطة ، يخبر محدد CSS التابع لموقع الويب كيف سيبدو عندما يكون أحد المحددات "متداخلاً" تحت سلف مشترك.

يصبح المحدد الأول هو أصل CSS ، أو محدد "سلف" ، ويصبح المحدد الثاني تابعًا. فكر في كيفية عمل دليل الملف: يشبه CSS الأصل مجلدًا يحتوي على مجلدات أخرى ، والتي يمكن أن تحتوي على مجلدات خاصة بها.

من بين المجمعات الأربعة ، فإن العامل الوحيد الذي يحدد كل ما هو متداخل تحت أصل CSS معين هو محدد CSS الفرعي. هناك ثلاث مجموعات أخرى.

  • يقوم المحدد الفرعي (">" بدلاً من مسافة مفردة) بتحديد العناصر المشار إليها بواسطة المحدد الأول في المُجمع. إذا كان المحدد الأول هو (div) والمحدد الثاني هو (p) ، يتم تحديد (p) فقط طالما أنه يحتوي على (div) كأصل. إذا تم إنشاء فقرة ضمن (قسم) جديد ، حتى لو كانت في نفس (div) ، فلن يتم الاحتفاظ بقواعد النمط.
  • محدد الأشقاء المجاور ("+" بدلاً من مسافة مفردة) يحدد فقط العنصر الأقرب إلى المحدد الثاني في أداة التجميع. إذا كان المحدد الأول هو (div) والمحدد الثاني هو (p) ، فسيتم تحديد العنصر الأول الذي يستخدم (p) وليس (div).
  • محدد الأخوة العام ("~" بدلاً من مسافة واحدة) يختار كل عنصر باستثناء تلك المشار إليها بواسطة المحدد الثاني. إذا كان المحدد الأول هو (div) والمحدد الثاني هو (p) ، فسيتم تحديد كل عنصر ليس (p).

كيف يبدو محدد سليل CSS؟

في المثال التالي لمحددان مختلفان لـ CSS يعملان جنبًا إلى جنب ، يكون (div) هو المحدد الأول في المركب الأول ، بينما (ul) هو المحدد الأول في الثاني المدمج. في كل من محددات CSS الفرعية ، يتم استخدام (p) كمحدد ثانٍ.

001_what_is_a_CSS_descendant_selector_4780518

تختلف عناصر النمط بين (div) و (ul) ، ولكن (p) تحمل بوضوح سمات أصل CSS الخاص بها في كلتا الحالتين.

لماذا تستخدم CSS Descendant Selector؟

لفهم أهمية المحدد الفرعي CSS ، من المهم أولاً فهم محددات CSS المتداخلة.

نريد عمومًا تطبيق قواعد نمط معينة على جميع مواقع الويب ، مثل الحجم المحدد أو الخط الذي تستخدمه جميع نصوص الفقرة (p) افتراضيًا. وبالمثل ، يمكن أن تبدأ HTML في الظهور بشكل فوضوي إذا تم تطبيق قواعد النمط هذه على كل فقرة فردية بدلاً من تطبيق موقع الويب بأكمله.

يمكن استخدام CSS المتداخلة من خلال استخدام أدوات دمج CSS مثل محدد CSS التابع. من خلال "تضمين" CSS أسفل المحدد الرئيسي ، من الممكن إخبار موقع الويب بسرعة وكفاءة الشكل الذي يفترض أن يبدو عليه المُحدِّد في كل سيناريو يُشار إليه في CSS الرئيسي.

يتيح لنا استخدام محدد CSS المتداخلة تطبيق نفس القواعد على نمط أقسام متعددة من الموقع في وقت واحد ، مما يسمح لنا بالحصول على عمل أقل مع الحفاظ أيضًا على HTML الخاص بنا نظيفًا ونقيًا.

instagram story viewer