المحتوى عن 'selector'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • نصائح وإرشادات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • مقالات عامة
  • التجارة الإلكترونية

التصنيفات

  • PHP
    • Laravel
    • ووردبريس
    • Magento
  • جافاسكريبت
    • Node.js
    • jQuery
    • AngularJS
  • HTML5
  • CSS
    • Sass
    • إطار عمل Bootstrap
  • سي شارب #C
    • منصة Xamarin
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • برمجة أندرويد
  • لغة R
  • سير العمل
    • Git
  • صناعة الألعاب
    • Unity3D
  • مقالات عامّة

التصنيفات

  • تجربة المستخدم
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
  • مقالات عامّة

التصنيفات

  • خواديم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • مقالات عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • استسراع النمو
  • المبيعات

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجينتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 1 نتيجة

  1. نستخدِم المحدِّدات Selectors في كلّ مرّة نستخدم فيها CSS. تبقى محدِّدات CSS - رغم كثرة الاستخدام - أحد الأجزاء الأكثر إهمالًا في ملفّ المواصفة Specification. نتحدّث كثيرًا عن التّحويلات Transformations الكبرى في CSS3 لكنّنا دائمًا ننسى الأساسيّات. يجعل الاستخدام الجيّد للمحدّدات من كتابة الشّفرة أيسر وأكثر أناقة. سنغطّي في هذا المقال عشرة محدّدات يقلّ الانتباه إليها في الغالب، إلّا أنّها تجمع بين الفائدة العاليّة والفعاليّة. *ربّما يكون محدِّد * الأسهل تذكّرا إلّا أنّه في الغالب لا يُستخدَم بكثرة. يتمثّل عمل هذا المحدِّد في تنسيق جميع العناصر الموجودة في الصّفحة؛ ومن الجيّد استخدامُه لإعادة العناصر للوضع الابتدائيّ Reset وإنشاء بعض التّنسيقات الافتراضيّة للصّفحة مثل مجموعة الخطوط Font family والحجم Size. * { margin: 0; padding: 0; font-family: helvetica, arial, sans-serif; font-size: 16px; }A + Bيُسمَّى محدّد المُجاوِر Adjacent ويعمل على تحديد العنصُر (B) الّذي يتبع العُنصُرَ الأوَّل (A) مباشرةً. العنصران A وB يوجدان في نفس المستوى. نحدّد في المثال التّالي أوَّلَ عنصر div بعد التّرويسة Header: header + div { margin-top: 50px; }A > Bيُشبه عملُه عملَ المحدِّد A B. يكمن الاختلاف في أنّ A B يحدّد كلّ العناصر المتفرّعة من العنصُر A مهما كان المستوى الّذي توجد به ؛ أما A > B فيكتفي بالعناصر الفرعيّة ذات المستوى الأوّل. يُنصَح باستخدام المحدِّد A > B عند التّعامل مع الأبناء المباشرين للعنصُر الأب. لاحِظ المثال التّالي: <h1> <em>هامّ:</em> هذا <span> العنوان <em>مهمّ</em> جدًّا </span> </h1>التّنسيق التّاليّ يلوّن عنصُر em المتفرّع عن h1 مباشرةً بالأحمر: h1 > em { color: red; }لو استخدمنا المحدّد A B لأعطى اللّون الأحمر لكلّ عناصر em في المثال السّابق. ["A[href*="exampleيُستخدَم لتنسيق رابط خاصّ بطريقة مغايرة. يُقارن ما يوجد بين ظفريْن بعنوان الرّابط فإن وُجدت مطابقة نُفِّذ التّنسيق. المثال التّاليّ يجعل كلّ الّروابط الّتي تُحيل إلى فيسبوك تبدو زرقاء: a[href*="facebook"] { color: blue; }يُمكن استخدام المحدِّد دون علامة *؛ يجب في هذه الحالة أن يكون التّطابق مع الرّابط تامًّا. (A:not(Bيستخدم عبارة النّفي not لاستبعاد ما لا يُطابق B. المثال التّاليّ يحدّد كلّ عناصر div الموجودة في الصّفحة ما عدا التّذييل Footer: div:not(.footer) { margin-bottom: 40px; }A:first-child / A:last-childيسمح بتحديد أوّل أو آخر عنصُر فرعيّ من العنصُر A (على التّوالي A:first-child وA:last-child). يُمكن أن يكون المحدِّد مفيدًا عند التّعامل مع عناصر لائحة، لحذف هامش أو إطار على سبيل المثال. في ما يلي نحذف الإطار عن أوّل عنصُر من اللّائحة والهامش عن آخر عنصُر: ul li:first-child { border: none; } ul li:last-child { margin-right: 0px; }(A:nth-child(nيوفّر المحدِّد nth-child وسيلةً سهلة لاختيّار أيّ عنصُر فرعيّ حسب ترتيبه. يحدّد المثال التّالي العنصُر الثّالث ضمن لائحة غير مرتَّبة ul ويطبِّق عليه التّنسيق. ul li:nth-child(3) { background: #ccc; }يُمكن استخدام هذا المحدّد أيضًا لاختيّار العناصِر الّتي ترتيبها مُضاعِف لعدد معيَّن عبر إضافة n بعد العدد. المثال التّالي يحدِّد العناصر ذات التّرتيب 3، 6، 9، 12 وهكذا. ul li:nth-child(3n) { background: #ccc; }(A:nth-last-child(nيُشبِه عمله عمل المحدِّد nth-child ويُستعمل على نفس المنوال؛ لكنه يبدأ حساب التّرتيب من آخر عنصُر، بدلًا من أوّل عنصُر. يعني هذا أنّك عند إعطاء العدد 2 لتحديد عنصُر من لائحة فسيختار العنصُر قبل الأخير في التّرتيب. ul li:nth-last-child(2) { background: #ccc; }(A:nth-of-type(nيحدّد العنصُر من نوع A الّذي يظهر للمرّة n. نختار في المثال التّاليّ ثالث فقرة (عنصُر p) ضمن div. div p:nth-of-type(3) { font-style: italic; }A:visitedهل لاحظت في ما مضى أنّ الصّفحات الّتي سبقت لك زيّارتها تظهر بلون مختلف في نتائج Google؟ هذا بالضّبط هو عمل المحدِّد visited. يمثّل هذا التّنسيق إضافةً كبيرة للمستخدِم؛ إلّا أنّه يُهمَل في بعض الأحيان. a:visited { color: blue; }خاتمةيظهر لي - حسب خبرتي - أنّ هذا النّوع من المحدِّدات يُمكن أن يختصر الكثير من الوقت ويجنِّب تكدّس الكثير من المعرّفات ID داخل الوسوم. ليست هذه سوى البداية، توجد الكثير من محدِّدات CSS الأخرى المفيدة الّتي تُهمَل أحيانًا. هل تستخدِم محدِّدات CSS؟ هل استخدامها أيسر من المعرِّفات والأصناف Classes؟ شاركنا تجربتك عبر التّعليقات. ترجمة بتصرّف لمقال 10 CSS selectors you shouldn’t code without لصاحبته Sara Vieira.