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

Ammar AlTahhanمنذ 6 سنوات

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

اذا كنت تظن انك تستطيع كتابة ال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>