0 المحددات (selectors) , كما لم تعرفها من قبل ! - الجزأ الأول

المحددات (selectors) , كما لم تعرفها من قبل ! - الجزأ الأول

تعتبر المحددات أو ما تعرف بال selectors جزء لا يمكن التخلي عنه عند تصميم موقعنا بال css و جيكويري و غيرها .

و بما أننا أحيانا نطمح للتطوير و ننسى أساسيات مهمة جدا , نجد أن عددا كبيرا جدا من مصممي الويب لا يستعملون إلّا نوعين من المحددات : "class." للكلاس , "id#" للـ ID !

هذه التدوينة ستساعدك حتما و تفيدك في تصميم مواقعك و تطويرها .

سنتعرف معا عن ماهيّة المحددات .

أنواع ال selectors , و طريقة إستعمالهم !

ماهي المحددات selectors ؟

المحددات تستعمل لإدراج بعض التعديلات على عنصر (element) معين دون غيره , أو مجموعة من العناصر في صفحة ويب معينة .

تختلف أنواع المحددات و تتعدد , لذا سنتعرض معا لمجموعة من المجددات مع تفسيرها و أمثلة لها .

1- محدد * :

غني عن التعريف , يستعمله غالبية مصممي المواقع , حيث يقوم بتحديد كل العناصر الموجودة في الصفحة و إضافة بعض التأثيرات أو التغييرات فيه .

مثال :

*{
margin:0px;
padding:0px;
font-family:tahoma;
font-size:15px;
background:red;
}

في هذا الكود قمنا بإختيار كل عناصر الصفحة , إدارج margin:0px; و padding:0px; و إختيار الخط و حجمه و إضافة خلفية حمراء له ..

2- محدد + :

ربما تكون هذه أول مرة تسمع فيها عن هذا المحدد , وظيفة هذا الأخير المحدد المجاور (adjacent) ,
فإن قلت :

div + p

 فكأنك قلت له حدد لي العنصر p التابع للعنصر div مباشرة .

مهم جدا : 
هذا لا يعني أن p موجود داخل العنصر div , لا  !!
هذا يعني أن العنصر div بعد إغلاقه , إذا كان هناك وسم p , فأضف للعنصر p ذلك مجموعة من التعديلات .
ممتاز !

مثال :

div + p{

background:red;

}

في هذا الكود قمنا بإختيار العنصر p الذي يأتي مباشرة بعد العنصر div , و أضفنا له خلفية حمراء .

2- محدد < :

يشبه إلى حد كبير إلى محدد div p , لكن الإختلاف بينهما أن div p يختار كل العناصر p الموجودة في العنصر div مهما كان المستوى , في حين أن بالمحدد < لا ينظر إلّا إلى المستوى الأول .

div > p{
background:red;
}

هنا قمنا يتحديد كل عنصر p حيث يكون "إبنا للعنصر الأب" و هو div .

3 - ["a[href="link

هنا كأنك طلبت كل عنصر a ذو  attribut href بالرابط link .
و إضافة بعض التعديلات عليه .

مثال :

a[href="http://modawin-blogger.blogspot.com"]{
background:red;
}

هذا ليس إلا جزء بسيطا جدا من المحددات في ال css , نتعرف معا إلى أنواع أخرى منها في جزء ثاني قريبا جدا .

تعليقك المشجع , و مشاركة التدوينة مع أصدقائك تشجعني على العمل و النشر و الإفادة .. شكرا ! ^^