استهداف العناصر هو واحد من أهم الدروس في اللغة ويبنى عليه كل شئ هو الذي ستتعلم فيه كيفية استهداف عنصر معين لعمل تعديلات على مظهره وتغيير كل ما يتعلق به من مظهر والوان وحجم كل شئ حرفياً
لذلك من المهم أن تركز جيداً وتفهم هذا الدرس اقرأه مرات متعددة إن تطلب الأمر لكن لا تخرج الا وانت تفهمه جيداً
ما هو استهداف العناصر في لغة CSS ؟
أنت قناص محترف وتريد ان تصيب هدف معين وسط مئات الأهداف إن لم تكن تعرف صفات هذا الهدف لكي تحدده وتصيبه ستجد نفسك تصيب اهداف خاطئة هذا بالضبط الإستهداف في CSS , عليك أن تحدد العنصر الذي تريد استهدافه بالضبط وإلا ستسبب مشاكل في صفحتك ستجعل الصفحة يتلف تنسيقها لذلك عليك ان تتعلم فن القنص وتحديد الأهداف.
1- الإستهداف العام
وهو استهداف العناصر التي في الصفحة بحسب علامة العنصر نفسها
نحن تعلمنا في
دروس HTML
العديد من العناصر مثل عنصر الفقرة [[<p>]] وعناصر
الحاويات مثل [[<div>]] وعناصر أخرى
لو اردنا استهداف جميع العناصر بشكل عام نستهدفها برمز العنصر نفسه مثال
div {
padding:10px;
margin:5px
}
p {
color:red;
font-size:12px;
margin:10px
}
strong {
text-align:center
}
لا تلتفت للخواص المذكورة ستتعلمها في المستقبل , يهمنا الآن الإستهداف
لاحظ أنني عندما وضعت وسم العنصر مثل [[div]] انا هكذا استهدفت
اى عنصر في الصفحة يحمل هذا الوسم نفس الشئ مع [[p]] و
[[strong]] كل هذا استهداف عام لجميع العناصر التي تحمل نفس
الوسوم
2- الإستهداف الخاص
كيف نستهدف عنصر بعينه هناك طريقتين
اما أن نعطي هذا العنصر كلاس class أو معرف id ونستهدفه
مثال هذا كود HTML
<div id="software">
<p class="myclass">فقرة أولى</p>
<p>فقرة ثانية</p>
<strong>نص غليظ</strong>
</div>
<p>فقرة ثالثة</p>
<strong class="myclass">نص غليظ ثاني</strong>
نريد أن نستهدف الفقرة الأولى والتي تحمل كلاس
[[myclass]]
نستهدفها كالتالي
p.myclass {
color:blue
}
هل لاحظت شئ ؟
لم نضع الكلاس فقط ووضعنا قبله [[p]] بدون أى مسافات لماذا ؟
لو وضعنا الكلاس فقط هذا معناه أننا سنستهدف أى عنصر له الكلاس
[[myclass]]
وكما ترى في الكود هناك عنصر نص غليظ ثاني يحمل نفس الكلاس فكان سيحصل على
نفس الخواص التي ستعطيها للفقرة لكن بوضع [[p]] انت تقول استهدف العناصر التي تحتوي
الكلاس وايضاً تكون من العنصر [[p]] انت حددت بالضبط ما يجب استهدافه.
طيب لو اردنا استهداف كل العناصر في ذلك الكلاس ببساطة نزيل [[p]] ليتم استهداف أى
عنصر يحمل الكلاس
الطريقة الثانية استهداف عن طريق الأب
نريد استهداف العنصر نص غليط الأول لكنه ليس عليه كلاس اما أن نضيف له كلاس أو نستهدفه عن طريق الأب
الأب لهذا العنصر هو [[div]] الذي معرفه
[[software]]
#software strong {
background-color:green;
color:white
}
بهذه الطريقة نحن استهدفنا كل العناصر التي من فئة [[strong]] الموجوده داخل الأب الذي يحمل معرف [[software]]
وهكذا نستطيع أن نقلل استخدام المعرفات والكلاسات في الصفحة بأن نعتمد على أن يكون عنصر حاوية له كلاس معين ونستهدف العناصر التي فيه عبر كلاس أو معرف الأب , بهذه الطريقة حتى لو عنصر آخر من فئة [[strong]] لكنه ليس داخل هذا الأب لن يتغير عليه شئ.
خاتمة
الإستهداف أمر ضروري يجب أن تتعلمه بشكل جيد , لكن يجب أن تعلم أن ما ذكرناه هو مجرد جزء بسيط من خواص الإستهداف التي يمكنك أن تتعلمها هناك امور اخرى كاستهداف عنصر بترتيبه وسط العناصر , استهداف عنصر مباشر لأب معين , استهداف عنصر بناء على قربه من عنصر معين , عالم الإستهداف كبير جداً لكن هذا الأساسي الذي يمكنك من التعامل بشكل اساسي مع الأمر ومع الوقت ستتعلم أمور أكثر احترافية لكن لا أريد اثقالك بمعلومات كثيرة في البداية نريد أن نأخذ الأمر بالتدريج حتى لا يظهر وكأنه صعب.
تعليقات