في تدوينة لي سابقة قمت بشرح كيفيت بناء صفحة ويب متجاوبة مع جميع احجام الاجهزة (الحاسوب ، اللوح الالكتروني، الهواتف) ، وطريقة الاستغناء عن المكتبات التقليدية للويب المتجاوب ك(البوتسراب ،والبيور ) وبالاخص ان كانت تلك المكتبة تعيق تقدم موقعك وبل تجعله ابطأ اثناء التحميل للاعضاء ...
الخورزميات بشكل اساسي اتت لتحل مشاكل متعددة وافضلها التي تختصر الوقت والجهد في css تجد المصمم يستهل الكثير من الوقت بالاخص ان كان الموقع به عدة متطلبات مختلفة قد يستهلك تزيين الموقع اكثر من الجهد والوقت من برمجته ، اتت css3 بفكرة رائعة عن الثوريث من خلال الاعداد الفردية والزوجية بما يسمى ب nth-child ل odd and even
في التدوينة السابقة لم اتطرق الى التفاصيل الخاصة بالثوريث لان الشرح كان مقتصر على توفير ويب متجاوب بدون الحاجة لاي مكتبة تفرض عليك ستيلاتها
بناء صفحة ويب متجاوب مع اجهزة الهواتف بدون البوت ستراب
NTH-CHILD
سأخذ على سبيل المثال قوائم واطبق عليها nth-child .
الكود الذي يهمنا في الشرح
li:nth-child(6) span {
background-color: #298EB2;
box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.4), inset 0 0 10px black;
}
ستلاحظ انه كلما غيرت القيمة 6 فانك تتحكم بشكل كبير في القائمة التي تريد تطبيق الستايل المعين عليها بدون الحاجة الى تطبيقه على الجميع او انك تريد تطبيق ستايل محدد على قوائم محددة دون القوائم الاخرى في الطريقة القديمة تحتاج الى اعطاء ايدي معرف او كلاس محددة لكي تقوم بالمهمة الان انت تقوم بها من خلال كود واحد او سطر واحد يكفي ، الخانة F تم تغيير لونها على باقي الخانات جرب ان تغير من قيمة القوائب لكن بشرط القيمة يجب ان تكون بتعداد القوائم
أنواع النطاقات الخاصة ب nth-child
النطاق الاجابي nth-child
li:nth-child(n+6) span {
background-color: #298EB2;
box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}
قم بوض N+ وستلاحظ ان القوائم الملونة هي اخر ستة قوائم فهذه الخاصة تطبق الستايل على اول قيمة عددية وما بعدها
النطاق السلبي nth-child
li:nth-child(-n+7) span {
background-color: #298EB2;
box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.4), inset 0 0 10px black;
}
في هذا النطاق يتم تطبيق الستايل على القوائم الاولى بما اننا اضفنا عملية الناقص سيتم تلوين اول 7قوائم او تطبيق الستابل على اول 7 قوائم بعد تجربة الكود اظن ان الفكرة بدأت تصل وتتضح فوائد هذه الخاصية الرائعة
تحديد نطاق nth-child
li:nth-child(n+3):nth-child(-n+6) span {
background-color: #298EB2;
box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.4), inset 0 0 10px black;
}
في هذا النطاق قمنا بتطبيق الستايل على المساحة المحصورة بين الرقم 3 والرقم 6 اي (c d e f) هذه القوائم طبيق عليها الستايل دون القوائم الاخرى انت تتحكم بشكل كبير وبكل اريحة في هذا الستايل بدون اللجوء الى الطريقة التقليدية التي تستهلك من وقتك الكثير
تخصيص نطاق من نوع تعداد فردي محصور بين قيمتين
li:nth-child(n+3):nth-child(odd):nth-child(-n+10) span {
background-color: #298EB2;
box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.4), inset 0 0 10px black;
}
لنقل انك تريد وضع ستايل محدد على القوائم او الجداول او div محددة في صفحتك وتريد ان تكون محدودة في نفس الوقت هذه هي الطريقة الصحيحة حاول ان تجربها في الكود الذي انزلته من github
اذا ما قمت بوضع الكود التالي على السورس سيقوم تلقائيا بالقفز ب3 مراحل ويطبق الستايل
li:nth-child(3n+1) span {
background-color: #298EB2;
box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.4), inset 0 0 10px black;
}
اي انه سيختار كل من الخانة A D J G
مذا لو اخترنا فقط الاعداد الزوجية سنلاحظ انه قد يستغني عن الاعداد الفردية بعد اضافة EVEN
li:nth-child(3n+1):nth-child(even) span {
background-color: #298EB2;
box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.4), inset 0 0 10px black;
}
سيختار فقط d j اي الاعداد الزوجية فقط
NTH-OF-TYPE RANGES
لنفترض انه لدينا عدة عناصر مثل div وspan ونريد ان نقوم بالتوريث على حسب العنصر
#example div:nth-of-type(2n+2){
-webkit-box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
cursor: pointer;
background-color: #e17149;
ثم نريد ان نقوم بالتوريث لعناصر span على حداّ
#example span:nth-child(n+3){
box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
cursor: pointer;
background-color: #298eb2;
}
لنجرب طريقة للاتيان بنتيجة سلبية للستايل :
#example span:nth-child(-n+4){
box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
cursor: pointer;
background-color: #298eb2;
}
#example div:nth-of-type(-n+5){
-webkit-box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
cursor: pointer;
background-color: #e17149;
}
هذا المثال يسمح لك باختيار عناصر أقل من القيمة في نفس النوع ، داخل نفس العنصر الأصلي ..
#example div:nth-of-type(n+1):nth-of-type(-n+3){
-webkit-box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
cursor: pointer;
background-color: #e17149;
}
#example span:nth-of-type(n+3):nth-of-type(-n+6){
box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
cursor: pointer;
background-color: #298eb2;
}
تتيح لك هذه الطريقة تحديد نطاق عام لنوع من العناصر ، داخل نفس العنصر الأصلي. في هذا المثال ، ترى أنني حددت المربعات 1-3 والدوائر 3-6
#example div:nth-of-type(n+1):nth-of-type(even):nth-of-type(-n+3){
-webkit-box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
cursor: pointer;
background-color: #e17149;
}
#example span:nth-of-type(n+3):nth-of-type(odd):nth-of-type(-n+7){
box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
cursor: pointer;
background-color: #298eb2;
}
يسمح لك بتحديد نطاق عام وتصفية النتائج بناءً على الفردي والزوجي even odd. لذلك يكون قد حدد المربعات 1-3 والدوائر 3-6. ولكن باستخدام الفردي يمكننا تصفية تلك النطاقات حسب النطاقات ، لذلك يتبقى لنا الدوائر 3 و 5 والمربع 2
اتمنى اني اكون وفي وكفيت في شرحي لخورزمية التوريث في الستايل
1 تعليقات
احسنت النشر
ردحذف