في كل مرة نستخدم CSS ، نستخدم المحددات. لكن على الرغم من ذلك ، فإن محددات CSS هي أحد الأجزاء الأكثر إهمالًا في المواصفات.
نحن نتحدث عن التحولات الكبيرة في CSS3 ولكن في كثير من الأحيان ننسى الأساسيات. إن الاستخدام الجيد للاختيارات يجعل ترميزنا اليومي أبسط وأكثر أناقة. اليوم سأقوم بتغطية الاختيارات العشرة التي غالباً ما تخطئ عقولنا ، ولكنها فعالة ومفيدة للغاية.
قد يكون المحدد * هو الذي تتذكره بسهولة ولكن غالباً ما يكون غير مستغل. ما يفعله هو وضع كل شيء على الصفحة ، كما أنه أمر رائع لإنشاء إعادة تعيين وأيضاً لإنشاء بعض الإعدادات الافتراضية للصفحة مثل عائلة الخطوط والحجم الذي ترغب في الحصول عليه.
* {margin: 0;padding: 0;font-family: helvetica, arial, sans-serif;font-size: 16px;}يُسمى هذا المحدد محددًا مجاورًا وما يفعله هو تحديد العنصر بعد العنصر الأول مباشرةً. إذا كنت تريد تحديد أول div بعد رأس الصفحة ، فيمكنك كتابة:
header + div {margin-top: 50px;}يختار هذا المحدد فقط الأطفال المباشرين على عكس AB الذي سيحدد أي مستوى من الأطفال A. يُنصح باستخدام هذا المحدد عند العمل مع أطفال المستوى الأول من عنصر رئيسي. على سبيل المثال ، إذا كنت تريد تحديد عناصر القائمة في المستوى الأول في قائمة غير مرتبة تبدو كالتالي:
- List Item With ul
- Sub list item
- Sub list item
- Sub list item
- List Item
- List Item
يمكنك استخدام هذا المحدد لأن محدد AB المعتاد سيحدد أيضًا عناصر القائمة داخل القائمة غير مرتبة المتداخلة
ul > li {background: black;color: white;}هذا هو محدد جيد بالفعل عندما تريد وضع رابط معين بطريقة مختلفة ، أي ما يقابل بين علامات الاقتباس سيتم مطابقته مع href الخاص بالرابط. على سبيل المثال ، لتصنيف جميع الروابط إلى Facebook باستخدام اللون الأزرق الذي ستستخدمه:
a[href*="facebook"] {color: blue;}هناك أيضًا إصدار بدون * يطابق عنوان URL الصحيح الذي يمكنك استخدامه مع الروابط الدقيقة.
هذا المحدد إذا كان مفيدًا بشكل خاص بسبب شرط النفي الذي يسمح لك بتحديد أي مجموعة من العناصر التي لا تتطابق مع ما تضعه في B. إذا كنت تريد تحديد كل div باستثناء التذييل الذي تحتاج إليه فقط:
div:not(.footer) {margin-bottom: 40px;}يسمح لنا الطفل الأول والطفل الأخير بتحديد الطفل الأول والأخير من العنصر الرئيسي. هذا يمكن أن يكون عونا كبيرا عندما يتعلق الأمر بسرد العناصر وإزالة الهامش أو الحدود. لإزالة الحدود في عنصر القائمة الأول والهامش في عنصر القائمة الأخير ، تحتاج إلى:
ul li:first-child {border: none;}ul li:last-child {margin-right: 0px;}يعد nth-child طريقة بسيطة يمكنك من خلالها تحديد أي عنصر في العنصر حسب ترتيبه. إذا كنت تريد على سبيل المثال إدراج عنصر القائمة الثالث في قائمة غير مرتبة ، فستكون هذه طريقة الانتقال:
ul li:nth-child(3) {background: #ccc;}يمكننا استخدام nth-child لتحديد كل مضاعف لرقم باستخدام المتغير n ، على سبيل المثال ، إذا وضعنا 3n ، فسيختار رقم العنصر 3 و 6 و 9 و 12 وما إلى ذلك.
يعمل nth-last-child مثل nth-child ولكن بدلاً من حساب شكل عنصر القائمة الأول يبدأ في العد من الأخير ، لذا إذا قمت باستخدامه مع الرقم الثاني ، فسيحدد عنصر القائمة الذي يأتي قبل الأخير. استخدامه هو تماما مثل محدد الطفل الثاني:
ul li:nth-last-child(2) {background: #ccc;}يعمل هذا المحدد على ما تعتقده بالضبط. فإنه يرى نوع العنصر الذي قمت بوضعه عليه ويختار ، على سبيل المثال ، العنصر الثالث في صفحتك الذي يطابق ما كتبته. لاختيار الفقرة الثالثة في div ، يمكنك استخدامها:
div p:nth-of-type(3) {font-style: italic;}هل لاحظت من قبل أنك عندما تبحث عن شيء ما على Google ، تظهر الصفحات التي رأيتها بالفعل بلون مختلف؟ هذا هو بالضبط ما زار. هذه إضافة رائعة للمستخدمين ولكنها في بعض الأحيان يتم نسيانها ومن خلال خبرتي ، تأتي في متناول اليد في كل مرة أبحث فيها على google.
a:visited {color: blue;}في تجربتي باستخدام هذه الأنواع من الاختيارات عندما يمكن أن يوفر لنا الترميز الكثير من الوقت ، وكذلك تجنب الحاجة إلى الكثير من ازدحام الهوية حتى الترميز لدينا. وهذه مجرد بداية لمُحَصِلات CSS ، هناك الكثير من المحددات التي يسهل استخدامها فعلاً ولكن نسيانها في بعض الأحيان.
هل تستخدم محددات CSS في أوراق الأنماط الخاصة بك؟ هل من الأسهل الرجوع إلى المعرفات والصفوف؟ اسمحوا لنا أن نعرف في التعليقات.