تنسيق الوسوم التي توجد داخل وسوم أخري:
ان طريقة اختيار المحددات لتنسيق صفحتك بمحددات الوسوم او محددات الكلاس تعتبر عملية تفاضلية. فمحددات الوسوم تعتبر أسهل وأسرع ولكنها تؤدي الي حدوث نفس التنسيق علي كل وسم يبدو كغيره وهذا بالطبع يبدو جيدا كما لو أردت أن يكون كل وسم مثل <h2> علي صفحتك يبدو بنفس التنسيق تماما كباقي الوسوم. من ناحية اخري محددات الكلاس ومحددات الأي دي تعطيك مرونه كاملة في تنسيق وسوم بمفردها وبطريقة مستقله ولكن تطبيق تنسيق معين بذاته علي أحد وسوم العنوان لتحديد نوع الخط مثلا قد يأخذ كثيرا من المجهود في لغة ال CSS وكذلك ال HTML فما تحتاجه هو طريقة للجمع بين سهولة المحددات مع الدقة في نفس الوقت في استخدام محددات الكلاس والأي دي لهذا يأتي الموضوع عن محددات النسل، أو محددات الانساب.
فأنت تستخدم محددات النسل أو الانساب لتنسق عدد معين من الوسوم بطريقة معينة (تماما مثل محددات الوسوم) ولكن فقط إذا كانت هذه الوسوم جزء معين من الصفحة. فهي مثلا كأن تقول للوسم <a> والموجود بالتحديد داخل قائمة او شريط التصفح للموقع إسمع انا عملت شويه تنسيق مخصوصين عشانك انت بس ولكن اي وسم تاني من نفس نوعك داخل الصفحة او الموقع ككل مالوش دعوه بالتنسيق ده. (مافيش أحسن طبعا من الشرح بالبلدي كده وخلي البساط أحمدي زي ما بيقولوا).
محددات النسل أو الانساب تمكنك من فرصة تنسيق بعض الوسوم معتمدا علي علاقة هذا الوسم بوسوم أخري ولكي تستوعب كيف تعمل هذه المحددات فعليك بالغوص قليلا في لغة ال HTML ومن ناحية اخري دراستك وفهمك لمحددات النسل سوف تجعلك قادر علي فهم أنواع أخري من المحددات والتي سنقوم بشرحها بعدها مباشرة، ولنتعرف أولا علي شجرة العائلة في لغة ال HTML ثم نكمل الشرح عن محددات النسل حتي نستوعبها بطريقة جيدة.
الوراثة في لغة ال CSS وصفحات ال HTML:
اذا نظرنا الي لغة ال HTML والتي تكون اي صفحة ويب فإنها شبيهة بشجرة العائلة حيث ان كل وسم من الوسوم يمثل فرد من افراد العائلة او يعتبر عضو من أعضاء عائلة ال HTML فأول وسم وهو <html> يعتبر الجد الاكبر في العائلة بالنسبة لكل الوسوم الاخري التي تتكون منها الصفحة وكذلك وسم ال <html> يحيط بوسمين اثنين رئيسين في كل صفحة ويب هما <head> و <body> مما يجعل منها اخوين وكذلك يجعل وسم ال <html> هو الاب للوسمين في ذات الوقت. وبالمثل أيضا فوسم داخل وسم اخر يعتبر من نسله مثال ذلك وسم <title> في اي صفحة HTML هو من نسل وسم ال <head> .
ولننظر في المثال التالي كشجرة عائلة ال HTML ولنتعرف علي افرادها وعلاقة بعضهم بالبعض.
ولنري كذلك الرسم التخطيطي لشجرة العائلة في هذا المثال
والأن نتعرف افراد هذه العائلة وعلاقتهم ببعض معاً:
الجد Ancestor : كل وسم يحيط بوسم اخر يعتبر هوه جده ففي المثال وسم ال <html> هو جد لكل الوسوم الاخري بينما وسم ال <body> هو جد لكل الوسوم التي بداخله وهي <h1> و <p> و <strong>.
النسل Descendent: كل وسم داخل وسم او أكثر يعتبر من نسله ففي الرسم التخطيطي وسم ال <body> هو من نسل وسم ال <html>, وبالمثل وسم ال <p> هو من نسل كل من <body> وكذلك من نسل وسم <html>.
الاب Parent: الوسم الاب هو اقرب وسم من نوع الجد لوسم اخر ففي الرسم التخطيطي وسم الاب هو أول وسم متصل مباشرة بالوسم الذي يليه مباشرة وهو أيضا الذي يعلوه في الرسم. وعلي ذلك وسم ال <html> هو الاب لكل من وسمين <head> و وسم <body> ولكنه ليس أب لأي وسم أخر وكما في الرسم أيضا وسم <p> هو الاب لوسم <strong>.
الابن Child : هو الوسم الذي يتم إحاطته بوسم أخر يعتبر هو الابن لهذا الوسم ففي الرسم كل من الوسمين <h1> و <p> كل منهما ابن لوسم <body> ولكن وسم <strong> لا يعتبر الابن للوسم لا يعتبر الابن لوسم ال <body> ولكنه يعتبر أبن الوسم <p> فقط.
الاخوة Sibling: الوسوم التي تعتبر أبناء لنفس الوسم تعتبر في ذات الوقت أخوة تماما مثل الاخوة والاخوات. ففي مثال الرسم التخطيطي الوسوم الاخوة يعتبران بجوار بعضهما البعض وهما متصلين بنفس الوسم الاب مثل وسمين ال <head> و <body> هما وسمين اخوة، وكذلك الامر الوسمين <h1> و <p> هما وسمين اخوة.
ولحسن الحظ ان لغة ال CSS وتمشيا مع هذا التشبيه بالأسرة لا يندرج تحتها الاعمام والعمات وأبناء العم أو الخالة (علي الرغم من أنه هناك شائعات كثيرة تدور حول انه عند الاصدار العاشر من لغة CSS سوف تندرج تحتها هذه القوانين وسيكون هناك اهتمام شديد بجميع أفراد شجرة العائلة من عم وخاله وابن خالة وابنة العم خصوصا وأنهم قد يتزوجون وينتج عنهم شجرة عائلة جديده).
انشاء محددات النسل أو الانساب Building Descendent Selectors:
محددات الانساب تجعلك قادر علي الاستفادة من خواص شجرة العائلة في لغة ال HTML بتنسيق الوسوم بطرق تختلف حسب ظهورها بترتيب معين داخل وسوم أخري او تنسيقات أخري. علي سبيل المثال لو عندك وسم <h1> علي صفحة الويب الخاصة بك وتريد ان تظهر كلمة معينة داخل هذا العنوان باستخدام مثلا الوسم <strong> والمشكلة ان معظم المتصفحات تظهر كلا من العنوان وكذلك وسم ال <strong> بنفس الطريقة ايضا بخط عريض لذلك فأي شخص يزور الصفحة لن يري اي فرق بين الكلمة التي تريد التركيز علينا في العنوان وباقي الكلمات المكونه له. فإذا كنت تحاول ابراز الكلمة الموجوده في وسم ال <strong> فلو استخدمت الوسم كمحدد للوسم في ال CSS فسوف لتغير خاصية اللون مثلا فسوف يصبح كل كلمة في الصفحة داخل وسم ال <strong> بنفس اللون الذي قمت بعمل تنسيق له لكننا في هذه الحالة نريد فقط ان نغير لون هذه الكلمة في العنوان فقط وليس في الصفحة ككل. في هذه الحالة محدد النسل أو الانساب يجعلك قادر علي تحديد هذا الوسم بصفة خاصة دون غيره داخل الصفحة. وسيكون شكله كالتالي
وفي هذه الحالة اي وسم <strong> يقع داخل وسم ال <h1> سوف يكون لونه احمر ولكن أي وسم <strong> داخل الصفحة لن يتأثر بهذا التنسيق. يمكنك انشاء تنسيق يؤدي نفس النتيجة بإنشاء محدد كلاس وليكن مثلا .strongHeader وتعطي خاصية اللون بقيمة اللون الاحمر، ثم بعد ذلك تقوم بإضافة خاصية الكلاس في وسم ال <strong> بنفس قيمة محدد الكلاس strongHeader ولكن محددات النسل او الانساب جعلتك تقوم بنفس التنسيق ولكن بدون اضافة او تعديل في ملف ال HTML وبدون الحاجه الي عمل اضافي.
فمحددات النسل او الانساب: تقوم بعمل تنسيق فقط للوسوم التي بداخل وسوم أخري متبعة في ذلك نفس النموذج الموجود في شجرة العائلة بالنسبة لوسوم لغة ال HTML. فأنت تقوم بتحديد محددات النسل او الانساب بتعيينك للمحدادت طبقا للجزء من شجرة العائلة التي تريد تنسيقها. ولنأخذ مثال عملي للشرح عليه سنكتب الكود أولا ثم نوضح بالرسم التخطيطي شجرة العائلة له ثم سنكتب بعض محددات النسل الخاصة بوسم الرابط او الوصلة <a> والتي تقع في القائمة المنقطة أولا الكود:
ثانيا الرسم التخطيطي:
كما في الكود والشكل إذا أردنا ان نميز هذا الرابط بتنسيق نوع الخط أريل مثلا Arial سوف نكتب محدد النسل أو الانساب كما يأتي
وبذلك نكون قد فصلنا تأثير نمط نوع الخط علي الروابط الموجوده داخل السلسلة عن الرابط الموجود داخل الفقرة فأعطيناه هنا تأثير مختلف وهذا النمط يؤثر فقط علي كل الراوبط الموجوده داخل القائمة غير المرقمة، ومحددات النسل او الانساب قد تحتوي علي أكثر من عنصرين او وسمين لتحديدها والمحددات التاليه تعتبر صالحه وتؤدي نفس الغرض كما في الشكل التالي
وبصفة عامة بينما من الافضل في محددات الانساب ان تكون محددات النسل أو الانساب تحتوي علي الابن Child والاب Parent فقط فقد يكون أيضا في بعض الاحيان أخذ الجد Ancestor يعتبر أفضل وذلك عندما نكون اكثر من تنسيق مختلف علي عنصر واحد او عناصر متشابهه وذلك للتميز بينها والتفريق بينها فنأخذ زياده. أيضا انت غير ملزم فقط باختيار الوسوم لتكوين محددات النسل او الأنساب فقط تختار من ضمنها محددات الكلاس او محددات الأي دي معا لتكون محددات النسل او الانساب. مثل :
محدد (:first-child): هذا المحدد يعود بنا لشجرة العائلة في لغة ال HTML ولنظهر صورة شجرة العائلة مرة أخري حتي نشرح عليها.
نلاحظ في الصورة ان كلا من وسوم <h1> و <h2> و <p> و <ul> هي جميعا الابن الأول للوسم <body> وكذلك وسم <li> هو الابن الاول للوسم <ul> لذلك فهذا المحدد يجعلك قادر علي اختيار وتنسيق الابن الاول والتابع لأي وسم مهما كان عدد الابناء لهذا الوسم.
فعلي سبيل المثال يمكن لنا ان نحدد ونختار الابن الاول في القائمة غير المنقطة وننشئ نمط خاص بالابن الاول وهو الوسم <li> ولكي مثلا نجعل هذا العنصريبدو بخط عريض فقط نكتب الكود التالي:
ولان هذا المحدد يتضمن فقط اسم العنصر الابن ولا يختار ولا يكتب فيه اسم الوالد فهذا النوع من المحددات يختار فقط الابن الاول من أي وسم وهو في هذه الحالة <li> وليس فقط وسم القائمة <ul> ولكن هناك ملحوظة مهمة في استعمال هذا المحدد بالنظر للصورة مرة اخري نجد أن أول ابن لوسم <body> هو الوسم <h1> اما باقي الوسوم وهي <h2> و <p> و <ul> كلها لا تعتبر الابن الاول لوسم ال <body> لذلك في هذه الحالة سيتم تفعيل هذا المحدد واختيار فقط وسم <h1> علي أنه الابن الاول لوسم <body> .
وبما انه علاقة الاباء والابناء بين وسوم لغة ال HTML قد تتغير كثيرا أثناء التعديل او الاضافة في صفحات الويب التي تقوم بتصميمها فمن الصعب تحديد كيف سيتصرف او سيختار محدد الوسم الزائف (:firstchild) اي عنصر. بالنسبة ايضا لهذا المحدد فمتصفح انترنت اكسبلورر الاصدار رقم 6 والذي قبله لا يدعمان هذا المحدد ولكن باقي المتصفحات تدعمه والاصدارات الاعلي من انترنت اكسبلورر.
المحددات المتقدمة Advanced Selectors
يضيف لنا الاصدار الثاني من لغة صفحات الانماط المتتالية CSS.2 محددات ذات قدرة عالية والتي تعطي للمصمم أيضا قدرة عالية علي التحكم في تصميم صفحته. وهذه المحددات المتقدمة مثلها مثل بعض محددات الطبقة الزائفة والوسوم الزائفة لا يدعمها ايضا الاصدار السادس من انترنت اكسبلورر ولكن الاصدار الثامن والتاسع يدعمها كلها وكذلك باقي المتصفحات.
محددات الابناء Child Selectors:
نكتب اولا هذا الكود ثم نوضح شجرة العائلة بالرسم التخطيطي له حتي يسهل شرح مثل هذا النوع من المحددات.
وهذا هو الشكل الرسم التخطيطي لشجرة العائلة لهذا الكود.
محدد الابناء هو مثل محدد النسل او الانساب والذي اشرنا اليه سابقا، فلغة ال CSS تجعلك قادر علي تنسيق الوسوم ابناء وسم اخري بمحددات الابناء. ومحدد الابناء يستخدم علامة اخري وهي القوس الزاوي او علامة اكبر من (>) لكي توضح العلاقة بين وسمين علي سبيل المثال في هذا الرسم المحدد (body > h1) يحدد الوسم <h1> والذي يعتبر الابن من الوسم <body>.
وعلي خلاف محددات النسل او الانساب والتي تجعلك تطبق النمط او التنسيق علي كل النسل او الانساب فمحددات الابناء تجعلك قادر علي تحديد اي وسم هو الابن وكذلك من هو الوسم أبوه علي سبيل المثال في صورة الرسم التخطيطي السابقة يوجد وسمين <h2> ولكن فإذا استخدمنا محدد النسل او الانساب (body h2) فسوف يقوم بتطبيق التنسيق علي الوسمين <h2> . وبالرغم من ان كلا الوسمين <h2> يعتبران داخل وسم ال <body> إلا انه وسم ال <h2> الثاني هو فقط الذي يعتبر الابن لوسم ال <body> اما الوسم <h2> الاول فيعتبر مباشرة داخل وسم ال <div> لهذا فأبوه هو الوسم <div> وبما ان كلا من الوسمين <h2> لهما والدين مختلفين لذلك فاستخدام محدد الابناء هنا يمكننا من تحديد اي وسم <h2> نريد تطبيق تنسيق معين عليه. ولكي تختار الوسم الثاني بمحدد الابناء سيكون شكل المحدد هكذا (body > h2) أما الوسم الاول من الوسم <h2> إذا أردت اختياره بواسطة محددات الابناء سكيون شكل المحدد هكذا (div > h2).
محددات الاخوة المتجاورين Adjacent Siblings:
علاقات الاباء بالابناء والعكس ليست فقط هي العلاقات الوحيدة في شجرة العائلة الخاصة بلغة ال HTML فبعض الاوقات قد ترغب في اختيار وسم بطريقة لا تعتمد فقط علي علاقة الوسم كأبن بالوسم الاب ولكن علي اساس علاقة أكثر من وسوم الابناء ببعضهم البعض. والوسم الذي يظهر مباشرة بعد وسم اخر في لغة ال HTML يسمي بالاخ المجاور.
في صورة الرسم التخطيطي السابقة وسم ال <div> يعتبر وسم الاخ المجاور لوسم <h1> ووسم ال <p> يعتبر الاخ المجاور لوسم <h2> حيث انهم يتشاركون في أب واحد وهو الوسم <div> وهكذا.
وباستخدام محددات الاخوة المتجاورة يمكنك اجراء تنسيقات عديده مثلا لأن تعطي لأول فقرة بعد كل عنوان فرعي تنسيق مختلف عن باقي الفقرات في الصفحة، إفرض انك تريد ان تزيل الهامش margin الذي يظهر فوق وسم الفقرة <p> حتي يظهر وسم الفقرة <p> اقرب ما يكون من وسم العنوان الفرعي <h2> وبدون اي مسافه كبيرة واضحه بينهم أو حتي تريد ان تعطي هذه الفقرة بالتحديد تنسيق اخر من حيث مثلا نوع الخط او لون الخط.
محددات الاخوة المتجاورة تأتي لنا بعلامة جديده هي علامة الزائد plus (+) لكي تربط بين كل وسم أخ بالوسم الاخ الاخر الذي يليه مباشرة. لذلك اذا أردنا تنسيق أول فقرة بوسم <p> بعد كل عنوان فرعي بوسم <h2> عندها يكون شكل محددات الاخوة المتجاورة كالتالي (h2 + p) والمسافة بعد وقبل علامة الزائد تعتبر امر اختياري بمعني انك لو لم تكتب مسافات فسوف يؤدي المحدد عمله بدون اي مشاكل هكذا (h2+p) والعنصر الثاني في هذا المحدد هو الذي يطبق عليه النمط اي انه الوسم الخاص بالفقرة <p> ولكن فقط عندما يأتي بعد وسم ال <h2>.
ان طريقة اختيار المحددات لتنسيق صفحتك بمحددات الوسوم او محددات الكلاس تعتبر عملية تفاضلية. فمحددات الوسوم تعتبر أسهل وأسرع ولكنها تؤدي الي حدوث نفس التنسيق علي كل وسم يبدو كغيره وهذا بالطبع يبدو جيدا كما لو أردت أن يكون كل وسم مثل <h2> علي صفحتك يبدو بنفس التنسيق تماما كباقي الوسوم. من ناحية اخري محددات الكلاس ومحددات الأي دي تعطيك مرونه كاملة في تنسيق وسوم بمفردها وبطريقة مستقله ولكن تطبيق تنسيق معين بذاته علي أحد وسوم العنوان لتحديد نوع الخط مثلا قد يأخذ كثيرا من المجهود في لغة ال CSS وكذلك ال HTML فما تحتاجه هو طريقة للجمع بين سهولة المحددات مع الدقة في نفس الوقت في استخدام محددات الكلاس والأي دي لهذا يأتي الموضوع عن محددات النسل، أو محددات الانساب.
فأنت تستخدم محددات النسل أو الانساب لتنسق عدد معين من الوسوم بطريقة معينة (تماما مثل محددات الوسوم) ولكن فقط إذا كانت هذه الوسوم جزء معين من الصفحة. فهي مثلا كأن تقول للوسم <a> والموجود بالتحديد داخل قائمة او شريط التصفح للموقع إسمع انا عملت شويه تنسيق مخصوصين عشانك انت بس ولكن اي وسم تاني من نفس نوعك داخل الصفحة او الموقع ككل مالوش دعوه بالتنسيق ده. (مافيش أحسن طبعا من الشرح بالبلدي كده وخلي البساط أحمدي زي ما بيقولوا).
محددات النسل أو الانساب تمكنك من فرصة تنسيق بعض الوسوم معتمدا علي علاقة هذا الوسم بوسوم أخري ولكي تستوعب كيف تعمل هذه المحددات فعليك بالغوص قليلا في لغة ال HTML ومن ناحية اخري دراستك وفهمك لمحددات النسل سوف تجعلك قادر علي فهم أنواع أخري من المحددات والتي سنقوم بشرحها بعدها مباشرة، ولنتعرف أولا علي شجرة العائلة في لغة ال HTML ثم نكمل الشرح عن محددات النسل حتي نستوعبها بطريقة جيدة.
الوراثة في لغة ال CSS وصفحات ال HTML:
اذا نظرنا الي لغة ال HTML والتي تكون اي صفحة ويب فإنها شبيهة بشجرة العائلة حيث ان كل وسم من الوسوم يمثل فرد من افراد العائلة او يعتبر عضو من أعضاء عائلة ال HTML فأول وسم وهو <html> يعتبر الجد الاكبر في العائلة بالنسبة لكل الوسوم الاخري التي تتكون منها الصفحة وكذلك وسم ال <html> يحيط بوسمين اثنين رئيسين في كل صفحة ويب هما <head> و <body> مما يجعل منها اخوين وكذلك يجعل وسم ال <html> هو الاب للوسمين في ذات الوقت. وبالمثل أيضا فوسم داخل وسم اخر يعتبر من نسله مثال ذلك وسم <title> في اي صفحة HTML هو من نسل وسم ال <head> .
ولننظر في المثال التالي كشجرة عائلة ال HTML ولنتعرف علي افرادها وعلاقة بعضهم بالبعض.
<html>
<head>
<title> A Simple Document</title>
</head>
<body>
<h1> Header</h1>
<p> A paragraph of <strong> important</strong> text.</p>
</body>
</html>
الجد Ancestor : كل وسم يحيط بوسم اخر يعتبر هوه جده ففي المثال وسم ال <html> هو جد لكل الوسوم الاخري بينما وسم ال <body> هو جد لكل الوسوم التي بداخله وهي <h1> و <p> و <strong>.
النسل Descendent: كل وسم داخل وسم او أكثر يعتبر من نسله ففي الرسم التخطيطي وسم ال <body> هو من نسل وسم ال <html>, وبالمثل وسم ال <p> هو من نسل كل من <body> وكذلك من نسل وسم <html>.
الاب Parent: الوسم الاب هو اقرب وسم من نوع الجد لوسم اخر ففي الرسم التخطيطي وسم الاب هو أول وسم متصل مباشرة بالوسم الذي يليه مباشرة وهو أيضا الذي يعلوه في الرسم. وعلي ذلك وسم ال <html> هو الاب لكل من وسمين <head> و وسم <body> ولكنه ليس أب لأي وسم أخر وكما في الرسم أيضا وسم <p> هو الاب لوسم <strong>.
الابن Child : هو الوسم الذي يتم إحاطته بوسم أخر يعتبر هو الابن لهذا الوسم ففي الرسم كل من الوسمين <h1> و <p> كل منهما ابن لوسم <body> ولكن وسم <strong> لا يعتبر الابن للوسم لا يعتبر الابن لوسم ال <body> ولكنه يعتبر أبن الوسم <p> فقط.
الاخوة Sibling: الوسوم التي تعتبر أبناء لنفس الوسم تعتبر في ذات الوقت أخوة تماما مثل الاخوة والاخوات. ففي مثال الرسم التخطيطي الوسوم الاخوة يعتبران بجوار بعضهما البعض وهما متصلين بنفس الوسم الاب مثل وسمين ال <head> و <body> هما وسمين اخوة، وكذلك الامر الوسمين <h1> و <p> هما وسمين اخوة.
ولحسن الحظ ان لغة ال CSS وتمشيا مع هذا التشبيه بالأسرة لا يندرج تحتها الاعمام والعمات وأبناء العم أو الخالة (علي الرغم من أنه هناك شائعات كثيرة تدور حول انه عند الاصدار العاشر من لغة CSS سوف تندرج تحتها هذه القوانين وسيكون هناك اهتمام شديد بجميع أفراد شجرة العائلة من عم وخاله وابن خالة وابنة العم خصوصا وأنهم قد يتزوجون وينتج عنهم شجرة عائلة جديده).
انشاء محددات النسل أو الانساب Building Descendent Selectors:
محددات الانساب تجعلك قادر علي الاستفادة من خواص شجرة العائلة في لغة ال HTML بتنسيق الوسوم بطرق تختلف حسب ظهورها بترتيب معين داخل وسوم أخري او تنسيقات أخري. علي سبيل المثال لو عندك وسم <h1> علي صفحة الويب الخاصة بك وتريد ان تظهر كلمة معينة داخل هذا العنوان باستخدام مثلا الوسم <strong> والمشكلة ان معظم المتصفحات تظهر كلا من العنوان وكذلك وسم ال <strong> بنفس الطريقة ايضا بخط عريض لذلك فأي شخص يزور الصفحة لن يري اي فرق بين الكلمة التي تريد التركيز علينا في العنوان وباقي الكلمات المكونه له. فإذا كنت تحاول ابراز الكلمة الموجوده في وسم ال <strong> فلو استخدمت الوسم كمحدد للوسم في ال CSS فسوف لتغير خاصية اللون مثلا فسوف يصبح كل كلمة في الصفحة داخل وسم ال <strong> بنفس اللون الذي قمت بعمل تنسيق له لكننا في هذه الحالة نريد فقط ان نغير لون هذه الكلمة في العنوان فقط وليس في الصفحة ككل. في هذه الحالة محدد النسل أو الانساب يجعلك قادر علي تحديد هذا الوسم بصفة خاصة دون غيره داخل الصفحة. وسيكون شكله كالتالي
h1 strong {
color: red;
}
فمحددات النسل او الانساب: تقوم بعمل تنسيق فقط للوسوم التي بداخل وسوم أخري متبعة في ذلك نفس النموذج الموجود في شجرة العائلة بالنسبة لوسوم لغة ال HTML. فأنت تقوم بتحديد محددات النسل او الانساب بتعيينك للمحدادت طبقا للجزء من شجرة العائلة التي تريد تنسيقها. ولنأخذ مثال عملي للشرح عليه سنكتب الكود أولا ثم نوضح بالرسم التخطيطي شجرة العائلة له ثم سنكتب بعض محددات النسل الخاصة بوسم الرابط او الوصلة <a> والتي تقع في القائمة المنقطة أولا الكود:
<html>
<head>
<title> basic web page</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<h1> The main page heading </h1>
<p> This is the first Paragraph and this work has a <strong> strong effect</strong> and this is a link to <a href="http://www.google.com/"> google</a></p>
<h2> this heading for the next list</h2>
<ul>
<li><a href="#">the first item</a></li>
<li><a href="#">the second item</a></li>
<li><a href="#">the third item</a></li>
</ul>
</body>
</html>
li a {
font-family; Arial;
}
ul li a body li a html li a html body ul li a
p .intro a { color: yellow;}
p.intro a { color: yellow;}
.intro a { color: yellow;
}
فعلي سبيل المثال يمكن لنا ان نحدد ونختار الابن الاول في القائمة غير المنقطة وننشئ نمط خاص بالابن الاول وهو الوسم <li> ولكي مثلا نجعل هذا العنصريبدو بخط عريض فقط نكتب الكود التالي:
li:first-child {
font-weight: bold;
}
وبما انه علاقة الاباء والابناء بين وسوم لغة ال HTML قد تتغير كثيرا أثناء التعديل او الاضافة في صفحات الويب التي تقوم بتصميمها فمن الصعب تحديد كيف سيتصرف او سيختار محدد الوسم الزائف (:firstchild) اي عنصر. بالنسبة ايضا لهذا المحدد فمتصفح انترنت اكسبلورر الاصدار رقم 6 والذي قبله لا يدعمان هذا المحدد ولكن باقي المتصفحات تدعمه والاصدارات الاعلي من انترنت اكسبلورر.
المحددات المتقدمة Advanced Selectors
يضيف لنا الاصدار الثاني من لغة صفحات الانماط المتتالية CSS.2 محددات ذات قدرة عالية والتي تعطي للمصمم أيضا قدرة عالية علي التحكم في تصميم صفحته. وهذه المحددات المتقدمة مثلها مثل بعض محددات الطبقة الزائفة والوسوم الزائفة لا يدعمها ايضا الاصدار السادس من انترنت اكسبلورر ولكن الاصدار الثامن والتاسع يدعمها كلها وكذلك باقي المتصفحات.
محددات الابناء Child Selectors:
نكتب اولا هذا الكود ثم نوضح شجرة العائلة بالرسم التخطيطي له حتي يسهل شرح مثل هذا النوع من المحددات.
<html>
<head>
<title>Children</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<h1> Heading 1</h1>
<div>
<h2> A <div> in the page</h2>
<p>This is paragraph contains a<strong> <a href="#">bold link. </a></strong>
</div>
<h2>Another heading 2 (but not inside the <div>)</h2>
<ul>
<li> This list item contains a sub-list
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ul>
</li>
<li><a href="#">Item 2 of the main list</a></li>
<li><a href="#">Item 3 of the main list</a></li>
</ul>
</body>
</html>
وعلي خلاف محددات النسل او الانساب والتي تجعلك تطبق النمط او التنسيق علي كل النسل او الانساب فمحددات الابناء تجعلك قادر علي تحديد اي وسم هو الابن وكذلك من هو الوسم أبوه علي سبيل المثال في صورة الرسم التخطيطي السابقة يوجد وسمين <h2> ولكن فإذا استخدمنا محدد النسل او الانساب (body h2) فسوف يقوم بتطبيق التنسيق علي الوسمين <h2> . وبالرغم من ان كلا الوسمين <h2> يعتبران داخل وسم ال <body> إلا انه وسم ال <h2> الثاني هو فقط الذي يعتبر الابن لوسم ال <body> اما الوسم <h2> الاول فيعتبر مباشرة داخل وسم ال <div> لهذا فأبوه هو الوسم <div> وبما ان كلا من الوسمين <h2> لهما والدين مختلفين لذلك فاستخدام محدد الابناء هنا يمكننا من تحديد اي وسم <h2> نريد تطبيق تنسيق معين عليه. ولكي تختار الوسم الثاني بمحدد الابناء سيكون شكل المحدد هكذا (body > h2) أما الوسم الاول من الوسم <h2> إذا أردت اختياره بواسطة محددات الابناء سكيون شكل المحدد هكذا (div > h2).
محددات الاخوة المتجاورين Adjacent Siblings:
علاقات الاباء بالابناء والعكس ليست فقط هي العلاقات الوحيدة في شجرة العائلة الخاصة بلغة ال HTML فبعض الاوقات قد ترغب في اختيار وسم بطريقة لا تعتمد فقط علي علاقة الوسم كأبن بالوسم الاب ولكن علي اساس علاقة أكثر من وسوم الابناء ببعضهم البعض. والوسم الذي يظهر مباشرة بعد وسم اخر في لغة ال HTML يسمي بالاخ المجاور.
في صورة الرسم التخطيطي السابقة وسم ال <div> يعتبر وسم الاخ المجاور لوسم <h1> ووسم ال <p> يعتبر الاخ المجاور لوسم <h2> حيث انهم يتشاركون في أب واحد وهو الوسم <div> وهكذا.
وباستخدام محددات الاخوة المتجاورة يمكنك اجراء تنسيقات عديده مثلا لأن تعطي لأول فقرة بعد كل عنوان فرعي تنسيق مختلف عن باقي الفقرات في الصفحة، إفرض انك تريد ان تزيل الهامش margin الذي يظهر فوق وسم الفقرة <p> حتي يظهر وسم الفقرة <p> اقرب ما يكون من وسم العنوان الفرعي <h2> وبدون اي مسافه كبيرة واضحه بينهم أو حتي تريد ان تعطي هذه الفقرة بالتحديد تنسيق اخر من حيث مثلا نوع الخط او لون الخط.
محددات الاخوة المتجاورة تأتي لنا بعلامة جديده هي علامة الزائد plus (+) لكي تربط بين كل وسم أخ بالوسم الاخ الاخر الذي يليه مباشرة. لذلك اذا أردنا تنسيق أول فقرة بوسم <p> بعد كل عنوان فرعي بوسم <h2> عندها يكون شكل محددات الاخوة المتجاورة كالتالي (h2 + p) والمسافة بعد وقبل علامة الزائد تعتبر امر اختياري بمعني انك لو لم تكتب مسافات فسوف يؤدي المحدد عمله بدون اي مشاكل هكذا (h2+p) والعنصر الثاني في هذا المحدد هو الذي يطبق عليه النمط اي انه الوسم الخاص بالفقرة <p> ولكن فقط عندما يأتي بعد وسم ال <h2>.
دروس اخري متعلقة بهذا الدرس : CSS Selectors 1 – CSS Selectors 2 - CSS Inheritance – CSS Cascade - CSS Specificity.
ليست هناك تعليقات:
إرسال تعليق