آخر الأخبار

استكشف في مدونة أوعي وشك عالم الابتكار

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

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

هذه المحدِّدات يمكن أن توفر الكثير من الوقت وتجعل الشفرة أكثر أناقة وفعالية. هناك العديد من المحدِّدات الأخرى التي يمكن استكشافها لتحسين تجربة التصميم
اهم 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;
    }
            

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

🌟 انتبه عزيزي أعضاء المجتمع! 🌟
نحن متحمسون لمشاركتك في مناقشاتنا الديناميكية. لضمان بيئة محترمة وشاملة للجميع، نطلب تعاونكم مع الإرشادات التالية:
1. احترام الخصوصية: يرجى عدم مشاركة معلومات حساسة أو شخصية في تعليقاتك.
2. انشر الإيجابية: نحن نتمسك بسياسة عدم التسامح مطلقًا مع خطاب الكراهية أو اللغة المسيئة. دعونا نحافظ على محادثاتنا محترمة وودية.
3. اللغة المفضلة: لا تتردد في التعبير عن نفسك باللغة الإنجليزية أو العربية. ستساعدنا هاتان اللغتان في الحفاظ على مناقشة واضحة ومتماسكة.
4. احترام التنوع: لتعزيز جو شامل، نطلب منك بكل احترام تجنب مناقشة المسائل الدينية في تعليقاتك.
تذكر أن مساهماتك قيمة، ونحن نقدر التزامك بجعل مجتمعنا مكانًا ترحيبيًا للجميع. دعونا نواصل التعلم والنمو معًا من خلال المناقشات البناءة والاحترام المتبادل.
شكرًا لكونك جزءًا من مجتمعنا اوعي وشك! 🌟

Post a Comment