THE CASCADE
.red {
color: red;
}
.blue {
color: blue;
}
ما اللون الذي ستظهر به هذه العناصر 
؟؟؟
<div class="red blue">
<div class="blue red">
الاجابه الصحيحه هي ان العنصران سيظران باللون الازرق ولكن كيف ولماذا ؟
تابع معي …
من المعروف لدينا ان احرف “CSS” هي اختصار ل “Cascading Style Sheets” والترجمه الحرفيه لها
"ورقه الانماط (التنسيقات) المتتاليه " 
اذا ما هو التتالي ؟
Cascade
process of combining different stylesheets and resolving conflicts between different css rules declarations,when more than one applies to a certain element.
بكلمات بسيطه هو مسؤول عن تطبيق تنسيق على عنصر من خلال حل التعارضات عندما يكون هناك اكثر من قاعده مطبقه على هذا العنصر . وما اعنيه بكلمه قاعده
هنا هو قواعد الاستايل المعروفه مثلا
font-size: 16;
color: #00F;
width: 500px;
طريقه عمل التتالي في ال CSS:
يقوم التتالي بالنظر الى ثلاثه أمور لتحديد القاعده التي ستتطبق حسب اهميتها :
- IMPORTANCE
- SPECIFICITY
- SOURCE ORDER
1. IMPORTANCE
يقوم ال التتالي باعطاء القواعد المتعارضه أهميات مختلفه حسب المكان الذي تم الاعلان عنها فيه من الاهم الى الاقل اهميه :
1.User !important declarations :
وهي القواعد التي تأتي من المستخدم مثلا ان قام بتغير خط المتصفح او ادخل تنسيقات عبر ال dev tools
2.Author !important declarations:
وهي القواعد التي تحتوي على الكلمه المحجوزه !important التي يقوم بكتابتها المبرمج او كاتب الشفره المصدريه
3.Author declaration :
وهي القواعد العاديه التي لا تحتوي على الكلمه المحجوزه !important
4.User declaration
5.Default browser declaration :
وهي القواعد الاقل اهميه حيث هي قواعد المتصفح الافتراضيه مثل اللون الازرق للروابط والهوامش في ال h1 وغيرها
يقوم التتالي بالنظر الى القواعد وتصنيفها حسب الاهميه والقواعد معimportant ! تفوز دائما من ناحيه والاولويه
لناخذ مثال:
.btn {
background-color: blue !important;
}
#nav .list-item .btn {
background-color: green;
}
في هذه القواعد المتعارضه ستم تطبيق القاعده الاكثر اهميه وهي التي تحتوي على الكلمه !important
كلتا القاعدتين عباره عن Author declaration
2.specificity
ولكن في اغلب الحالات لا نستعمل ! important وتكون القواعد بنفس الاهميه … هذه الحاله ما يفعله التتالي هو ان يقوم بالمقارنه بحسب ال specificity حيث هي دقه تحديد العنصر
حيث classes اكثر تخصيصا من ال element selectors وال ID’s اكثر تخصيصا من الclasses وال inline styles اكثر تحديدا من ال ID
inline styles
ID
classes , pseudo-classes , attribute
tag selectors
يقوم التتالي بحساب ال specificity ويطبق القواعد الاعلى تخصيصا اذا لنرى كيف يتم حساب ال specificity
.btn {
background-color: blue;
}
#nav .list-item .btn{
background-color: blue;
}
a{
# THE CASCADE
```css
.red {
color: red;
}
.blue {
color: blue;
}
ما اللون الذي ستظهر به هذه العناصر ؟؟؟
<div class="red blue">
<div class="blue red">
الاجابه الصحيحه هي ان العنصران سيظران باللون الازرق ولكن كيف ولماذا ؟
تابع معي …
من المعروف لدينا ان احرف “CSS” هي اختصار ل “Cascading Style Sheets” والترجمه الحرفيه لها
"ورقه الانماط (التنسيقات) المتتاليه "
اذا ما هو التتالي ؟
Cascade
process of combining different stylesheets and resolving conflicts between different css rules declarations,when more than one applies to a certain element.
بكلمات بسيطه هو مسؤول عن تطبيق تنسيق على عنصر من خلال حل التعارضات عندما يكون هناك اكثر من قاعده مطبقه على هذا العنصر . وما اعنيه بكلمه قاعده
هنا هو قواعد الاستايل المعروفه مثلا
font-size: 16;
color: #00F;
width: 500px;
طريقه عمل التتالي في ال CSS:
يقوم التتالي بالنظر الى ثلاثه أمور لتحديد القاعده التي ستتطبق حسب اهميتها :
- IMPORTANCE
- SPECIFICITY
- SOURCE ORDER
1. IMPORTANCE
يقوم ال التتالي باعطاء القواعد المتعارضه أهميات مختلفه حسب المكان الذي تم الاعلان عنها فيه من الاهم الى الاقل اهميه :
1.User !important declarations :
وهي القواعد التي تأتي من المستخدم مثلا ان قام بتغير خط المتصفح او ادخل تنسيقات عبر ال dev tools
2.Author !important declarations:
وهي القواعد التي تحتوي على الكلمه المحجوزه !important التي يقوم بكتابتها المبرمج او كاتب الشفره المصدريه
3.Author declaration :
وهي القواعد العاديه التي لا تحتوي على الكلمه المحجوزه !important
4.User declaration
5.Default browser declaration :
وهي القواعد الاقل اهميه حيث هي قواعد المتصفح الافتراضيه مثل اللون الازرق للروابط والهوامش في ال h1 وغيرها
يقوم التتالي بالنظر الى القواعد وتصنيفها حسب الاهميه والقواعد معimportant ! تفوز دائما من ناحيه والاولويه
لناخذ مثال:
.btn {
background-color: blue !important;
}
#nav .list-item .btn {
background-color: green;
}
في هذه القواعد المتعارضه ستم تطبيق القاعده الاكثر اهميه وهي التي تحتوي على الكلمه !important
كلتا القاعدتين عباره عن Author declaration
2.specificity
ولكن في اغلب الحالات لا نستعمل ! important وتكون القواعد بنفس الاهميه … هذه الحاله ما يفعله التتالي هو ان يقوم بالمقارنه بحسب ال specificity حيث هي دقه تحديد العنصر
حيث classes اكثر تخصيصا من ال element selectors وال ID’s اكثر تخصيصا من الclasses وال inline styles اكثر تحديدا من ال ID
inline styles
ID
classes , pseudo-classes , attribute
tag selectors
يقوم التتالي بحساب ال specificity ويطبق القواعد الاعلى تخصيصا اذا لنرى كيف يتم حساب ال specificity
.btn { //A
background-color: blue;
}
ul#nav li.list-item .btn{ //B
background-color: red;
}
a{ //c
background-color: green;
}
#nav a.btn:hover { //D
background-color: gray;
}
جميع هذه القواعد عباره عن Author declaration هذا يعني انها تتساوى في الاهميه اذا لنحسب ال specificity الخاصه بها ، في الواقع ال specificity هي عباره عن عدد من الارقام :
(0, 0, 0, 0)
حيث كل خانه تمثل عدد مرات ظهور ال selector
القاعده A// من المثال ال specificity فيها تساوي (0,0,1,0) | كلاس واحد فقط وهو btn.
القاعده B// من المثال ال specificity فيها تساوي (0,1,2,2) | كلاسين وid , و اثنين element selector
القاعده C// من المثال ال specificity فيها تساوي (0,0,0,1) | فقط element selector
القاعده D// من المثال ال specificity فيها تساوي (0,1,2,1) | _id و class ومعه pseudo class و element selector
اذا في رأيك اي قاعده ستفوز؟ نعم القاعده B// لان لديها اعلى specificity 
resources: css_specificity
source order
في اخر الامر اذا تساوت دقه تحديد العنصر للقواعد وايضا كانت بنفس الاهميه يلجاء التتالي الى تطبيق اخر قاعده في ترتيب القواعد
a{
color:red;
}
a{
color:green;
}
a{
color:blue;
]
سيكون اللون ازرق هنا وهكذا .
اتمنى ان تكون استفدت من هذا الطرح المتواضع وشكرا 
مقال في القمة أمجد… ابداع حقيقة