المحددات Selectors

ما هو المحدد Selector ؟

المحدد Selector في لغة CSS يحدد العناصر التي تنطبق عليها مجموعة من قواعد CSS. بحيث يتم تطبيق قواعد النمط CSS rules المرتبطة بهذا المحدد على العناصر التي تطابق المحدد.
تعتبر المحددات Selectors واحدة من أهم مظاهر CSS لأنها تسمح لك باستهداف عناصر محددة على صفحة الويب الخاصة بك بطرق مختلفة بحيث يمكن تصميمها.

تتوفر عدة أنواع من المحددات في CSS ، فلنلق نظرة عن كثب على بعض منها :

المحدد العام Universal Selector

يتطابق المحدد العام universal selector ، الذي يُشار إليه بعلامة النجمة (*) ، مع كل عناصر صفحة الويب.
قد يتم إهمال المحدد العام في حالة وجود شروط أخرى على العنصر. غالبًا ما يستخدم هذا المحدد لإزالة الهوامش margins و الحاشية الافتراضية paddings من العناصر لغايات الإختبار.

لفهم كيف يعمل المحدد العام لنجرب المثال التالي:

مثال
تشغيل
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }

سيتم تطبيق قواعد النمط داخل المحدد * على كل عنصر في المستند.

ملاحظة:

يوصى بعدم استخدام المحدد العام * كثيرًا ، حيث أن هذا المحدد يطابق كل عنصر على صفحة الويب مما يضع الكثير من الضغط غير الضروري على المتصفحات. استخدم مُحدِّدات نوع العنصر Element Type Selectors أو محدد الفئة Class selector بدلاً من ذلك.

مُحدِّدات نوع العنصر Element Type Selectors

يطابق محدد نوع العنصر Element Type Selectors كل عنصر له نفس النوع في صفحة الويب .
دعنا نجرب مثالًا لنفهم كيف يعمل بشكل عملي:

مثال
تشغيل
  1. p {
  2. color: blue;
  3. }

سيتم تطبيق قواعد النمط داخل المحدد p على كل عنصر فقرة <p> في صفحة الويب وسيتم تطبيق الون الأزرق عليها ، بغض النظر عن موقعه في صفحة الويب.

مُحدِّدات المُعرِّفات ID selectors

يُستخدم محدد المعرف ID selectors لتعريف قواعد النمط لعنصر واحد فريد داخل صفحة الويب.
يتم تعريف محدد المعرف بعلامة # متبوعة مباشرة بقيمة ID للعنصر .

مثال
تشغيل
  1. #error {
  2. color: red;
  3. }
ملاحظة:

يجب أن تكون قيمة السمة id فريدة داخل صفحة الويب - مما يعني أنه لا يوجد عنصران في صفحةHTML يمكنهما مشاركة نفس قيمة السمة id

محددات الفئات Class Selectors

يمكن استخدام محددات الفئة class selectors لتحديد أي عنصر HTML له السمة class . يتم تنسيق جميع العناصر التي لها نفس قيمة السمة class وفقًا للقاعدة المحددة.
يتم تحديد محدد الفئة class selector بعلامة نقطة . متبوعة مباشرة بقيمة السمة class المراد تطبيق القواعد عليها .

مثال
تشغيل
  1. .blue {
  2. color: blue;
  3. }

تجعل قواعد النمط أعلاه النص باللون الأزرق لكل عنصر في الصفحة له القيمة blue كقيمة للسمة class .
ويمكننا ان نكون اكثر دقة. فمثلا:

مثال
تشغيل
  1. p.blue {
  2. color: blue;
  3. }

تجعل قاعدة النمط داخل المحدد p.blue النص باللون الأزرق لعناصر <p> فقط التي تم تحديد قية السمة class لها blue ، وليس لها تأثير على الفقرات الأخرى.

محددات العناصر السليلة Descendant Selectors

يمكنك استخدام هذه المحددات عندما تحتاج إلى تحديد عنصر ينحدر من عنصر آخر ، على سبيل المثال ، إذا كنت ترغب فقط في استهداف تلك الروابط المضمنة في قائمة غير مرتبة unordered list ، بدلاً من استهداف جميع عناصر الروابط.
ولتوضيح آلية عملها لنلقي نظرة على المثال التالي :

مثال
تشغيل
  1. ul.menu li a {
  2. text-decoration: none;
  3. }
  4. h1 em {
  5. color: green;
  6. }

يتم تطبيق قواعد النمط داخل المحدد ul.menu li على العناصر <a> الموجودة داخل عنصر <ul> الذي يحتوي على القيمة menu للسمة class ، وليس لها تأثير على الروابط الأخرى داخل صفحة الويب.
وبالمثل ، سيتم تطبيق قواعد النمط داخل محدد h1 em على العناصر <em> الموجودة في عنصر <h1> فقط ولا تؤثر على عناصر <em> الأخرى.

محددات العناصر الأبناء Child Selectors

يتم استخدام محدد الإبن child selector لتحديد تلك العناصر فقط التي تكون أبناء مباشرة لبعض العناصر.
يتكون محدد الإبن child selector من محددين أو أكثر مفصولين برمز أكبر من >. يمكنك استخدام هذا المحدد ، على سبيل المثال ، لتحديد المستوى الأول لعناصر القائمة داخل قائمة متداخلة تحتوي على أكثر من مستوى واحد.
ولتوضيح آلية عملها لنلقي نظرة على المثال التالي :

مثال
تشغيل
  1. ul > li{
  2. list-style: square;
  3. }
  4. ul > li ol {
  5. list-style: none;
  6. }

يتم تطبيق قاعدة النمط داخل المحدد ul > li فقط على عناصر <li> التي تكون أبناء مباشرة لعناصر <ul> ، وليس لها تأثير على عناصر القائمة الأخرى.

محددات الأخوة المتجاورة Adjacent Sibling Selectors

يمكن استخدام محددات الأخوة المتجاورة Adjacent Sibling Selectors لتحديد عناصر الأخوة (أي العناصر على نفس المستوى). يحتوي هذا المحدد على بناء الجملة مثل: E1 + E2 ، حيث E2 هو هدف المحدد.

سيحدد المحدِّد h1 + p في المثال التالي عناصر <p> فقط إذا كان العنصران <h1> و <p> يشتركان في نفس العنصر الأب في صفحة الويب ويسبق <h1> العنصر <p> على الفور. هذا يعني فقط أن الفقرات التي تأتي مباشرة بعد كل عنوان <h1> سيكون لها قواعد النمط المرتبطة. دعونا نرى كيف يعمل هذا المحدد بالفعل:

مثال
تشغيل
  1. h1 + p{
  2. color: blue;
  3. font-size: 18px;
  4. }
  5. ul.task + p {
  6. color: #f0f;
  7. text-indent: 30px;
  8. }

محددات الأخوة العامة General Sibling Selectors

تشبه محددات الأخوة العامة General Sibling Selectors محددات الأخوة المتجاورة Adjacent Sibling Selectors إلى حَدٍّ ما . يتكون محدد الإخوة العام من محددين بسيطين مفصولين بالرمز (~). يمكن كتابتها بالشكل التالي: E1 ~ E2 ، حيث E2 هو هدف المحدد.
سيحدد المحدد h1 ~ p في المثال أدناه جميع عناصر <p> التي سبقتها عنصر <h1> ، حيث تشترك هذه العناصر في نفس العنصر الأب في صفحة الويب.

مثال
تشغيل
  1. h1 ~ p{
  2. color: blue;
  3. font-size: 18px;
  4. }
  5. ul.task ~ p {
  6. color: #f0f;
  7. text-indent: 30px;
  8. }

تجميع المحددات Grouping Selectors

غالبًا ما تتشارك العديد من المحدِّدات في ورقة الانماط نفس إعلانات قواعد النمط style rules declarations. يمكننا تجميع هذه القواعد في قائمة مفصولة بفواصل (,) لتقليل حجم الكود في ورقة الأنماط.
نلقي نظرة:

مثال
تشغيل
  1. h1 {
  2. font-size: 36px;
  3. font-weight: normal;
  4. }
  5. h2 {
  6. font-size: 28px;
  7. font-weight: normal;
  8. }
  9. h3 {
  10. font-size: 22px;
  11. font-weight: normal;
  12. }

كما ترى في المثال أعلاه ، فإن نفس قاعدة النمط font-weight: normal; ؛ تتم مشاركتها بواسطة المحددات h1 و h2 و h3 ،إذا يمكن تجميعها في قائمة مفصولة بفواصل ، كما يلي:

مثال
تشغيل
  1. h1, h2, h3 {
  2. font-weight: normal;
  3. }
  4. h1 {
  5. font-size: 36px;
  6. }
  7. h2 {
  8. font-size: 28px;
  9. }
  10. h3 {
  11. font-size: 22px;
  12. }
« التالي السابق »