المحددات البسيطة في لغة سى اس اس CSS

المحدد البسيط هو إما محدد نوع أو محدد عام يتبعه مباشرة صفر أو أكثر من محددات السمات أو محددات المعرفات أو الفئات الزائفة بأي ترتيب. المحدد البسيط يتطابق مع تطابق جميع مكوناته. ملاحظة: المصطلحات المستخدمة هنا في CSS 2.2 تختلف عن المصطلحات المستخدمة في CSS3.

المحددات البسيطة Simple Selectors:

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

 ملاحظة: المصطلحات المستخدمة هنا في CSS 2.2 تختلف عن المصطلحات المستخدمة في CSS3.

أمثلة علي المحددات الشائعة:

* . # ul li x+y x>y x~y 

يعتبر المحدد في لغة css هو وضع مجموعة من التنسيقات في مجموعة واحدة ويمكن إستدعاء تلك التنسيقات في أي وقت متضمنا كود html عن طريق class ونضع إسم المحدد وتلك الطريقة أشبه بوضع مكتبة في أول كود في معظم اللغات ثم إستدعائة عند الحاجة له ومن مميزاته :

*أنه يوفر علينا بتكرار التنسيقات في كل سطر حيث أن تعديل واحد في التنسيق الأول يسري علي الباقي كله ولا نحتاج أن نمر علي الكود سطر سطر.

*يمكن عمل العديد من المحددات مما يوفر لنا الاختيار بينهم .

تُستخدم محددات CSS لتحديد المحتوى الذي تريد تصميمه. المحددات هي جزء من مجموعة قواعد CSS. تحدد محددات CSS عناصر HTML وفقا لمعرفها وفئتها ونوعها وسمتها وما إلى ذلك.

أنواع المحددات في CSS.

1. محدد عنصر CSS element selector
2. محدد معرف CSS id selector
3. محدد فئة CSS class selector
4. محدد عام CSS universal selector
5. محدد مجموعة CSS group selector

1) CSS Element Selector 

- يختار هذا المحدد بالاسم

1. p{  
2.     text-align: center;  
3.     color: blue;  
4. }  

1. <p>hello</p>  
2. <p id="test">you are welcome</p>  
3. <p>good luck!</p>  

Output:

hello

you are welcome

good luck!

2) CSS Id Selector

يحدد محدد id سمة id لعنصر HTML لتحديد عنصر معين. دائماً ما يكون المعرف فريداً داخل الصفحة ، لذلك يتم إختياره لتحديد  عنصر واحد فريد.

دعونا نأخذ مثالاً مع المعرف "الفقرة1  

1. #para1 {  
2.     text-align: center;  
3.     color: blue;  
4. }  

1. <p id="para1">Hello Javatpoint.com</p>  
2. <p>This paragraph will not be affected.</p>

output:

Hello Javatpoint.com

3) CSS Class Selector

- يحدد محدد الفئة عناصر HTML مع سمة فئة معينة. يتم استخدامه بحرف الفترة. (رمز النقطة الكاملة) متبوعًا بإسمه.

1. .center {  
2.     text-align: center;  
3.     color: blue;  
4. }  

<h1 class="center">This heading is blue and center-aligned.</h1>

<p class="center">This paragraph is blue and center-aligned.</p> 

Output:

This heading is blue and center-aligned.

This paragraph is blue and center-aligned.

4) CSS Universal Selector

يتم إستخدام المحدد العام كحرف بدل. يختار جميع العناصر الموجودة في الصفحات.

1. * {  
2.    color: green;  
3.    font-size: 20px;  
4. }   

1. <h2>This is heading</h2>  
2. <p>This style will be applied on every paragraph.</p>  
3. <p id="para1">Me too!</p>  
4. <p>And me!</p>  

Output:

This is heading

هذا هو العنوان سيتم تطبيق هذا النمط على كل فقرة

Me too!

And me!

5) CSS Group Selector

يتم إستخدام محدد التجميع لتحديد كل العناصر بنفس تعريفات الأنماط

نرى كود CSS بدون محدد المجموعة

محدد التجميع يستخدم لتصغير الكود. تُستخدم الفواصل لفصل كل محدد في التجميع 

1. h1 {  
2.     text-align: center;  
3.     color: blue;  
4. }  
5. h2 {  
6.     text-align: center;  
7.     color: blue;  
8. }  
9. p {  
10.     text-align: center;  
11.     color: blue;  
12. }

1. h1,h2,p {  
2.     text-align: center;  
3.     color: blue;  
4. } 

1. <h1>Hello Javatpoint.com</h1>  
2. <h2>Hello Javatpoint.com (In smaller font)</h2>  
3. <p>This is a paragraph.</p>

Output:

Hello Javatpoint.com

Hello Javatpoint.com (In smaller font)

This is a paragraph.

المسافات بين ال Selectors

الكثير من الذين يبدأون  في التعلم يضع مسافات بين ال Selectors مرة ومرة أخرى لا لذلك يجب أن توحد الطريقة إذا قمت بوضع مسافة يجب وضعها بين الكل والعكس والمثال يوضح لك سوف تجد أنه لا توجد مسافة بين ال Class الأول والثاني ولكن هناك مسافة بين الثاني والثالث لذلك لا يوجد نمط للكتابة الآن

.class-one {

}
.class-two {

}

.class-three {

}

ملخص 

أولاً : إذا كنت تستعمل المتصفحات القديمة ، مثل Internet Explorer 6 ، فلا يزال عليك توخي الحذر عند إستخدام هذه المحددات الأحدث. لكن من فضلك لا تدع هذا يمنعك من تعلمها. سوف تقوم بإيذاء نفسك بشكل كبير. تأكد من الرجوع هنا للحصول على قائمة توافق المستعرض. بدلاً من ذلك ، يمكنك إستخدام البرنامج النصي IE9.js الممتاز من Dean Edward لتقديم الدعم لهذه المحددات إلى المتصفحات القديمة.

ثانياً : عند العمل مع مكتبات JavaScript ، مثل jQuery الشائعة ، حاول دائمًا إستخدام محددات CSS3 الأصلية على الطرق / المحددات المخصصة للمكتبة ، إن أمكن. ستجعل الكود الخاص بك أسرع ، حيث يمكن لمحرك المحدد إستخدام التحليل الأصلي للمتصفح ، بدلاً من التحليل الخاص به.

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

الدرس التالي : خاصية الأولوية للكود فى CSS