ما هو المحدد Selector ؟
المحدد Selector في لغة CSS يحدد العناصر التي تنطبق عليها مجموعة من قواعد CSS. بحيث يتم تطبيق قواعد النمط CSS rules المرتبطة بهذا المحدد على العناصر التي تطابق المحدد.
تعتبر المحددات Selectors واحدة من أهم مظاهر CSS لأنها تسمح لك باستهداف عناصر محددة على صفحة الويب الخاصة بك بطرق مختلفة بحيث يمكن تصميمها.
تتوفر عدة أنواع من المحددات في CSS ، فلنلق نظرة عن كثب على بعض منها :
المحدد العام Universal Selector
يتطابق المحدد العام universal selector ، الذي يُشار إليه بعلامة النجمة (*)
، مع كل عناصر صفحة الويب.
قد يتم إهمال المحدد العام في حالة وجود شروط أخرى على العنصر. غالبًا ما يستخدم هذا المحدد لإزالة الهوامش margins و الحاشية الافتراضية paddings من العناصر لغايات الإختبار.
لفهم كيف يعمل المحدد العام لنجرب المثال التالي:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>مثال على المحدد العام Universal Selector</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <h1>This is heading</h1> <p>This is a paragraph.</p> </body> </html>
المخرجات
سيتم تطبيق قواعد النمط داخل المحدد *
على كل عنصر في المستند.
يوصى بعدم استخدام المحدد العام *
كثيرًا ، حيث أن هذا المحدد يطابق كل عنصر على صفحة الويب مما يضع الكثير من الضغط غير الضروري على المتصفحات. استخدم مُحدِّدات نوع العنصر Element Type Selectors أو محدد الفئة Class selector بدلاً من ذلك.
مُحدِّدات نوع العنصر Element Type Selectors
يطابق محدد نوع العنصر Element Type Selectors كل عنصر له نفس النوع في صفحة الويب .
دعنا نجرب مثالًا لنفهم كيف يعمل بشكل عملي:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>مثال على مُحدِّدات نوع العنصر Element Type Selectors</title> <style> h1 { color: red; } p { color: blue; } </style> </head> <body> <h1>This is heading</h1> <p>This is a paragraph.</p> </body> </html>
المخرجات
سيتم تطبيق قواعد النمط داخل المحدد p
على كل عنصر فقرة <p>
في صفحة الويب وسيتم تطبيق الون الأزرق عليها ، بغض النظر عن موقعه في صفحة الويب.
مُحدِّدات المُعرِّفات ID selectors
يُستخدم محدد المعرف ID selectors لتعريف قواعد النمط لعنصر واحد فريد داخل صفحة الويب.
يتم تعريف محدد المعرف بعلامة #
متبوعة مباشرة بقيمة ID
للعنصر .
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>مثال على مُحدِّدات المُعرِّفات ID selectors</title> <style> #error { color: #ff0000; } </style> </head> <body> <p id="error">This is a warning!</p> </body> </html>
المخرجات
يجب أن تكون قيمة السمة id
فريدة داخل صفحة الويب - مما يعني أنه لا يوجد عنصران في صفحةHTML يمكنهما مشاركة نفس قيمة السمة id
محددات الفئات Class Selectors
يمكن استخدام محددات الفئة class selectors لتحديد أي عنصر HTML له السمة class
. يتم تنسيق جميع العناصر التي لها نفس قيمة السمة class
وفقًا للقاعدة المحددة.
يتم تحديد محدد الفئة class selector بعلامة نقطة .
متبوعة مباشرة بقيمة السمة class
المراد تطبيق القواعد عليها .
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>مثال على محددات الفئات Class Selectors</title> <style> .blue { color: #0000ff; } </style> </head> <body> <h1 class="blue">This is a heading</h1> <p class="blue">This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
المخرجات
تجعل قواعد النمط أعلاه النص باللون الأزرق لكل عنصر في الصفحة له القيمة blue
كقيمة للسمة class
.
ويمكننا ان نكون اكثر دقة. فمثلا:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>مثال على محددات الفئات Class Selectors</title> <style> p.blue { color: #0000ff; } </style> </head> <body> <h1 class="blue">This is a heading</h1> <p class="blue">This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
المخرجات
تجعل قاعدة النمط داخل المحدد p.blue
النص باللون الأزرق لعناصر <p>
فقط التي تم تحديد قية السمة class
لها blue
، وليس لها تأثير على الفقرات الأخرى.
محددات العناصر السليلة Descendant Selectors
يمكنك استخدام هذه المحددات عندما تحتاج إلى تحديد عنصر ينحدر من عنصر آخر ، على سبيل المثال ، إذا كنت ترغب فقط في استهداف تلك الروابط المضمنة في قائمة غير مرتبة unordered list ، بدلاً من استهداف جميع عناصر الروابط.
ولتوضيح آلية عملها لنلقي نظرة على المثال التالي :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>مثال على محددات العناصر السليلة Descendant Selectors</title> <style> h1 em { color: green; } ul.menu { padding: 0; list-style: none; } ul.menu li{ display: inline; } ul.menu li a { margin: 10px; text-decoration: none; } </style> </head> <body> <h1>This is a <em>heading1</em></h1> <h2>This is a <em>heading2</em></h2> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </body> </html>
المخرجات
يتم تطبيق قواعد النمط داخل المحدد ul.menu li
على العناصر <a>
الموجودة داخل عنصر <ul>
الذي يحتوي على القيمة menu
للسمة class
، وليس لها تأثير على الروابط الأخرى داخل صفحة الويب.
وبالمثل ، سيتم تطبيق قواعد النمط داخل محدد h1 em
على العناصر <em>
الموجودة في عنصر <h1>
فقط ولا تؤثر على عناصر <em>
الأخرى.
محددات العناصر الأبناء Child Selectors
يتم استخدام محدد الإبن child selector لتحديد تلك العناصر فقط التي تكون أبناء مباشرة لبعض العناصر.
يتكون محدد الإبن child selector من محددين أو أكثر مفصولين برمز أكبر من >
. يمكنك استخدام هذا المحدد ، على سبيل المثال ، لتحديد المستوى الأول لعناصر القائمة داخل قائمة متداخلة تحتوي على أكثر من مستوى واحد.
ولتوضيح آلية عملها لنلقي نظرة على المثال التالي :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>مثال على محددات العناصر الأبناء Child Selectors</title> <style> ul > li { list-style: square; } ul > li ol { list-style: none; } </style> </head> <body> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li> <a href="#">Services</a> <ol> <li><a href="#">Design</a></li> <li><a href="#">Development</a></li> </ol> </li> <li><a href="#">Contact</a></li> </ul> </body> </html>
المخرجات
يتم تطبيق قاعدة النمط داخل المحدد ul > li
فقط على عناصر <li>
التي تكون أبناء مباشرة لعناصر <ul>
، وليس لها تأثير على عناصر القائمة الأخرى.
محددات الأخوة المتجاورة Adjacent Sibling Selectors
يمكن استخدام محددات الأخوة المتجاورة Adjacent Sibling Selectors لتحديد عناصر الأخوة (أي العناصر على نفس المستوى). يحتوي هذا المحدد على بناء الجملة مثل: E1 + E2
، حيث E2
هو هدف المحدد.
سيحدد المحدِّد h1 + p
في المثال التالي عناصر <p>
فقط إذا كان العنصران <h1>
و <p>
يشتركان في نفس العنصر الأب في صفحة الويب ويسبق <h1>
العنصر <p>
على الفور. هذا يعني فقط أن الفقرات التي تأتي مباشرة بعد كل عنوان <h1>
سيكون لها قواعد النمط المرتبطة. دعونا نرى كيف يعمل هذا المحدد بالفعل:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>مثال على محددات الأخوة المتجاورة Adjacent Sibling Selectors</title> <style> h1 + p { color: blue; font-size: 18px; } ul.task + p { color: #f0f; text-indent: 30px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <ul class="task"> <li>Task 1</li> <li>Task 2</li> <li>Task 3</li> </ul> <p>This is one more paragraph.</p> <p>This is also a paragraph.</p> </body> </html>
المخرجات
محددات الأخوة العامة General Sibling Selectors
تشبه محددات الأخوة العامة General Sibling Selectors محددات الأخوة المتجاورة Adjacent Sibling Selectors إلى حَدٍّ ما . يتكون محدد الإخوة العام من محددين بسيطين مفصولين بالرمز (~)
. يمكن كتابتها بالشكل التالي: E1 ~ E2
، حيث E2
هو هدف المحدد.
سيحدد المحدد h1 ~ p
في المثال أدناه جميع عناصر <p>
التي سبقتها عنصر <h1>
، حيث تشترك هذه العناصر في نفس العنصر الأب في صفحة الويب.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>مثال على محددات الأخوة العامة General Sibling Selectors</title> <style> h1 ~ p { color: blue; font-size: 18px; } ul.task ~ p { color: #f0f; text-indent: 30px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <ul class="task"> <li>Task 1</li> <li>Task 2</li> <li>Task 3</li> </ul> <p>This is one more paragraph.</p> <p>This is also a paragraph.</p> </body> </html>
المخرجات
تجميع المحددات Grouping Selectors
غالبًا ما تتشارك العديد من المحدِّدات في ورقة الانماط نفس إعلانات قواعد النمط style rules declarations. يمكننا تجميع هذه القواعد في قائمة مفصولة بفواصل (,)
لتقليل حجم الكود في ورقة الأنماط.
نلقي نظرة:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>مثال على محددات CSS بدون تجميع</title> <style> h1 { font-size: 36px; font-weight: normal; } h2 { font-size: 28px; font-weight: normal; } h3 { font-size: 22px; font-weight: normal; } </style> </head> <body> <h1>This is a heading of level 1</h1> <h2>This is a heading of level 2</h2> <h3>This is a heading of level 3</h3> </body> </html>
المخرجات
كما ترى في المثال أعلاه ، فإن نفس قاعدة النمط font-weight: normal;
؛ تتم مشاركتها بواسطة المحددات h1
و h2
و h3
،إذا يمكن تجميعها في قائمة مفصولة بفواصل ، كما يلي:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>مثال على تجميع المحددات</title> <style> h1, h2, h3 { font-weight: normal; } h1 { font-size: 36px; } h2 { font-size: 28px; } h3 { font-size: 22px; } </style> </head> <body> <h1>This is a heading of level 1</h1> <h2>This is a heading of level 2</h2> <h3>This is a heading of level 3</h3> </body> </html>
المخرجات