شرح المحددات CSS (Selectors) | أساسيات CSS


المحددات (Selectors) في CSS 


تعتمد القدرة على تنسيق عنصر معين على عدد الأحرف التي يأتي بها في بداية كل قاعدة أو نمط ويسمى المحدد. من خلال تحديد العنصر الذي نريد تنسيقه، يمكنك التحكم بشكل كامل في مظهر الصفحة.


أنواع المحدد Selector

إذا كنت تريد تطبيق نمط عام، يمكنك استخدام المحددات التي تحدد كل العناصر من نفس النوع في مكان واحد. بخلاف ذلك، يمكنك استخدام محددات أخرى لها نطاق تحديد أصغر وتحديد عناصر معينة. تمنحك المحددات الكثير من القوة. في هذا الدرس، سنناقش أنواعها. 

في المثال أدناه، المحدد هو h1، والذي يشير إلى جميع عناصر h1 على الصفحة. يتم تطبيق نوع الخط ولونه المحددين في كتلة الإشعارات على جميع عناصر <h1> في الصفحة:

h1 {
font-family: Tahoma,Arial,sans-serif;
color: #CCCCFF;
}

محدد النوع Type Selector : تنسيق علامات HTML

المحددات المستخدمة لتنسيق بعض علامات HTML تسمى محددات النوع أو العناصر، وبما أنها مطبقة على جميع العلامات من نفس النوع في الصفحة، فهي أداة تنسيق فعالة للغاية.

باستخدام محددات الكتابة، يمكنك إجراء تغييرات شاملة في تصميمك بأقل تكلفة وجهد. على سبيل المثال، عندما تريد تنسيق نص كل فقرة في الصفحة بطريقة لها نفس الخط واللون والحجم، ما عليك سوى تحديد نمط باستخدام المحدد p:

p {
font-family:Tahoma;
font-size:14px;
font-weight:bold;
color:#4caf50;
}

أحد الأشياء التي تبسط العمل مع محددات النوع هو أنه بعد تحديد نمط باسم العنصر المطلوب، ليست هناك حاجة لعمل أي شيء آخر ويتم تطبيق النمط على العناصر المحددة بواسطة المستعرض.

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


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

عندما تريد أن يظهر عنصر واحد أو أكثر بشكل مختلف عن العناصر الأخرى ذات الصلة في الصفحة، على سبيل المثال، تحتوي صورة واحدة أو أكثر على الصفحة على حد أحمر بينما الصور الأخرى على الصفحة غير منسقة، فإننا نستخدم محددات الفئة.

لإنشاء محدد فئة، ما عليك سوى تحديد اسم له، ثم تطبيق هذا الاسم فقط على علامات HTML التي تريد تنسيقها. على سبيل المثال، فئة تسمى حقوق النشر. ونطبقها فقط على الفقرة التي تحتوي على معلومات حقوق النشر:

.copyright {
font-family:Tahoma;
font-size:12px;
margin-top:15px;
padding:10px 20px;
}

بعد تحديد النمط أعلاه، الآن لتطبيقه على الفقرة المطلوبة، نضيف سمة class إلى فقرتنا:

<p class="copyright">All Rights Reserved</p>

تسمح لك محددات الفئة بتحديد عنصر معين. على سبيل المثال، تريد تنسيق كلمة أو كلمتين في فقرة؛ هنا لا تريد أن يتم تطبيق النمط على عنصر الفقرة بأكمله وبضع عبارات فقط بتنسيق مختلف. في هذه الحالات، يمكنك استخدام المحددات. يمكنك حتى استخدام محددات الفئات لتطبيق نفس النمط على عناصر متعددة لها علامات مختلفة في HTML.


يجب مراعاة القواعد التالية عند تسمية الفئة:


تبدأ أسماء جميع محددات الفئات بنقطة

يسمح CSS فقط باستخدام الأحرف والأرقام والواصلات والشرطة السفلية لتسمية الفئات.

بعد النقطة، يجب أن يبدأ اسم الفصل بأحرف

أسماء الفئات حساسة لحالة الأحرف.


بعد إنشاء نمط الفصل، تحتاج إلى تحديد المكان الذي تريد استخدام هذا النمط فيه. للقيام بذلك، أضف سمة الفئة إلى علامات HTML التي تريد تطبيق النمط عليها.

يوضح المثال التالي كيفية إضافة سمة class إلى عنصر فقرة: 

<p class="special">This is a paragraph</p>

تطبيق فئات متعددة على عنصر 

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

في هذه الحالات، يعمل المصمم المتمرس، مع الأخذ في الاعتبار أن الأزرار يمكن أن يكون لها أوجه تشابه واختلاف، على النحو التالي: يصمم فئة تنطبق على جميع الأزرار، ويصمم ثلاث فئات أخرى، كل منها خاص بكل زر.  

.btn {
border-radius: 5px;
font-family: Arial, Helvetica, serif;
font-size: .8 em;
}

فئات لكل زر:

.delete {
background-color: red;
}
.add {
background-color: green;
}
.edit {
background-color: grey;
}

استخدام الفئات المحددة أعلاه كما يلي:

<button class="btn add">Add</button>
<button class="btn delete">Delete</button>
<button class="btn edit">Edit</button>

 

كلمات مفتاحية: