CSS Selectors الأشهر التي يجب عليك تذكرها - الجزء الأول

Ammar AlTahhanمنذ 6 سنوات

بسم الله الرحمن الرحيم

 

css-selectors-1f0064.png.d03086c298b6ce0f85c394976d9ccacb.png

 

اذا كنت تظن انك تستطيع كتابة الcss باستدعاء الid والclass ودمج الكلاسات فقط فأنت تفتقد للكثير.

في هذا الموضوع سنستعرض أهم الcss selectors لتسهل عليك الاختيار حين كتابة الcss لصفحتك القادمة.

(في آخر هذا الموضوع سأضع Cheat Sheet قائمة سريعة تستطيع الرجوع لها دائما لتجد ما تحتاجه)

 

1. *

لنبدأ بأوضح الselectors المتاحة. النجمة تستعمل لاختيار كل العناصر على الصفحة بلا استثاء.

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


* {
 margin: 0;
 padding: 0;
}

يمكن استخدام النجمة أيضا بعد احد العناصر لتحديد جميع العناصر التي تقع أسفلها:


#container * {
 border: 1px solid black;
}

 

 

2. #X

رمز ال# يستعمل لاستهداف العناصر باستخدام الid الخاص بها


#container {
   width: 960px;
   margin: auto;
}

 

 

3. .X


.error {
  color: red;
}

تستخدم النقطة لاختيار الclass (مجموعة من العناصر)، بعكس ال# التي تستهدف عنصرا واحدا فقط

 

4. X

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


a { 
  color: red; 
}

ul { 
  margin-left: 0; 
}

 

5. X Y

من أشهر الcss selectors. يستعملها المطورون لاختيار جميع العناصر من نوع معين والتي تقع أسفل جميع العناصر من نوع آخر

على سبيل المثال، يمكنك استخدام هذا النوع عندما تريد استهداف جميع عناصر الanchors التي تقع تحت عنصر الList تحديدا


li a {
  text-decoration: none;
}
اقتباس

 

عندما يكون الselector لديك على شكل X Y Z A B فاعلم انك تستخدمه بطريقة خاطئة

 

 

6. a:link or a:visited

نقوم باستخدام الكلاس link بعد النوع anchor لاستهداف جميع الروابط التي لم يتم الضغط عليها بعد

ونقوم باستخدام الكلاس visited بعد النوع anchor لاستهداف جميع الروابط التي تمت زيارتها


a:link { 
  color: red; 
}

a:visted { 
  color: purple; 
}

 

7. X + Y

هذا النوع من الselectors يدعى (المجاور)، حيث يتيح لنا اختيار النوع الذي يأتي مباشرة بعد النوع السابق


ul + p {
   color: red;
}

مثلا، قمنا هنا باختيار جميع الباراقرافات p التي تأتي بعد الul مباشرة

 

8. X > Y

هذه مشابهة للسابقة X Y، ولكنها تقوم باختيار العناصر التي تقع تحت العناصر الأخرى مباشرة


#container > ul {
  border: 1px solid black;
}

<div id="container">
   <ul>	<!-- affected -->
      <li> List Item
        <ul> <!-- not affected -->
           <li> Child </li>
        </ul>
      </li>
      <li> List Item </li>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>

في المثال السابق، قمنا باستهداف جميع عناصر الul التي تقع مباشرة تحت عنصر #container (السطر الثاني فقط بدون السطر الرابع)

 

9. X ~ Y

هذا الselector مشابه لـ X + Y، ولكن في الأخير نقوم باختيار أول عنصر X فقط يأتي بعد عنصر Y مباشرة.

بينما هنا، سنقوم باختيار أي عنصر X يأتي بعد Y (المباشرة ليست شرطا هنا)


ul ~ p {
   color: red;
}

قمنا هنا باختيار اي عنصر p يأتي بعد ul بغض النظر عن عددها

 

 

 

CHEAT SHEET

*

لاستهداف جميع العناصر في الصفحة

X#

لاستهداف عنصر باستخدام الid

X.

لاستهداف مجموعة عناصر باستخدام الclass

X

لاستهداف نوع معين من العناصر

X Y

لاستهداف عنصر يقع أسفل عنصر آخر مباشرة

a:link or a:visited

لاستهداف الروابط المضغوط وغير المضغوط عليها

X + Y

لاستهداف نوع من العناصر الذي يأتي بعد نوع آخر مباشرة

X > Y

لاستهداف العناصر X أسفل من Y مباشرة

X ~ Y

لاستهداف نوع من العناصر الذي يأتي بعد نوع آخر 

 

 

وصلنا الى ختام الموضوع، أستودعكم الله الذي لا تضيع ودائعه

كلمات دليلية:
1
إعجاب
1618
مشاهدات
0
مشاركة
0
متابع

التعليقات (0)

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !