اهم 10 محددات CSS لا تليق البرمجة بدونها

محدِّدات CSS الأقل شهرة ولكنها مفيدة

1. المحدِّد العام *

   يُستخدم لتنسيق جميع العناصر في الصفحة. غالبًا ما يُستخدم لإعادة تعيين الهوامش والحشوات وتعيين الخطوط الافتراضية.

   
   * {
       margin: 0;
       padding: 0;
       font-family: helvetica, arial, sans-serif;
       font-size: 16px;
   }
           

2. محدِّد المجاور +

   يحدد العنصر الذي يلي عنصرًا آخر مباشرةً. على سبيل المثال، تنسيق أول عنصر div بعد الترويسة.

   
   header + div {
       margin-top: 50px;
   }
           

3. محدِّد الأبناء المباشرين >

   يحدد العناصر الفرعية المباشرة فقط. على سبيل المثال، تنسيق عنصر em الذي هو ابن مباشر لعنصر h1.

   
   h1 > em {
       color: red;
   }
           

4. محدِّد السمة [attribute*="value"]

   يحدد العناصر التي تحتوي على قيمة معينة في سمة معينة. على سبيل المثال، تنسيق الروابط التي تحتوي على facebook في عنوانها.

   
   a[href*="facebook"] {
       color: blue;
   }
           

5. محدِّد النفي :not

   يحدد العناصر التي لا تطابق محددًا معينًا. على سبيل المثال، تنسيق جميع عناصر div ما عدا تلك التي تحتوي على كلاس footer.

   
   div:not(.footer) {
       margin-bottom: 40px;
   }
           

6. محدِّد العنصر الأول والآخر :first-child و :last-child

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

   
   ul li:first-child {
       border: none;
   }
   ul li:last-child {
       margin-right: 0px;
   }
           

7. محدِّد العنصر رقم n :nth-child

   يحدد العنصر الفرعي رقم n على سبيل المثال، تنسيق العنصر الثالث في قائمة.

   
   ul li:nth-child(3) {
       background: #ccc;
   }
           

8. محدِّد العنصر رقم n من النهاية :nth-last-child

   يحدد العنصر الفرعي رقم n بدءًا من النهاية. على سبيل المثال، تنسيق العنصر قبل الأخير في قائمة.

   
   ul li:nth-last-child(2) {
       background: #ccc;
   }
           

9. محدِّد العنصر رقم n من نوع معين :nth-of-type

   يحدد العنصر رقم n من نوع معين. على سبيل المثال، تنسيق الفقرة الثالثة داخل div.

   
   div p:nth-of-type(3) {
       font-style: italic;
   }
           

10. محدِّد الروابط التي تمت زيارتها :visited

    يحدد الروابط التي تمت زيارتها مسبقًا. على سبيل المثال، تغيير لون الروابط التي تمت زيارتها إلى الأزرق.

    
    a:visited {
        color: blue;
    }
            

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

كيف كان المقال؟