x

أولوية CSS ، وخوارزمية التتابع (Cascade) ، والوراثة (Inheritance)

ما هي أولوية CSS ، وما درجة أولوية CSS المضمَّنة والداخلية والخارجية؟

نظري

تُعد "خصوصية سي.اس.اس" (CSS specificity) مفهوماً أساسياً يحدد الأنماط التي تُطبَّق على عنصر ما عندما تكون هناك قواعد متعددة قابلة للتطبيق عليه.

يساعد فهم "الخصوصية" (specificity) المطورين على حل التعارضات بين قواعد CSS المختلفة، ويضمن تطبيق الأنماط المطلوبة بشكل متسق.

يتم حساب خصوصية CSS بناءً على نوع المُحدِّدات (type selectors) المُستخدَمة.

الأنماط المضمنة Inline Styles :

تُعزى أعلى درجات التحديد إلى الأنماط المضمنة (inline styles)، التي تُطبَّق مباشرةً على العنصر من خلال السمة style.

في هذا المثال، ستظهر الفقرة الأولى باللون الأحمر، بينما ستظهر بقية عناصر الفقرات p باللون الأزرق؛ ويعود ذلك إلى أن الأنماط المضمنة (inline styles) تتمتع بأولوية تحديد أعلى مقارنةً بمحددات النوع (type selectors)، مثل محدد p الموضّح في ملف styles.css.

index.html


<link rel="stylesheet" href="styles.css" >

<p style="color: red;">فقرة حمراء</p>
<p>فقرة أخرى</p>
<p>فقرة أخرى</p>
<p>فقرة أخرى أخرى</p>

styles.css


p  {
  color: blue;
}

معاينة:


محددات المُعرِّف ID Selectors :

وعليه، تتمتع مُحدِّدات المُعرِّف (ID selectors) بمستوى عالٍ من التخصيص.

index.html


<link rel="stylesheet" href="styles.css" >

<p id="para-1">فقرة حمراء</p>
<p>فقرة أخرى</p>
<p>فقرة أخرى</p>
<p>فقرة أخرى أخرى</p>

styles.css


#para-1  {
  color: red;
}

p  {
  color: blue;
}

معاينة:


مُحدِّدات الفئة والسمة والفئة الزائفة Class, Attribute, and Pseudo-Class Selectors :

بعد ذلك، يأتي دور مُحدِّدات الفئات (class selectors)، ومُحدِّدات السمات (attribute selectors)، والفئات الزائفة (pseudo-classes).

تشمل الأمثلة محددات الفئات (class selectors) مثل .container و .button ، ومحددات السمات (attribute selectors) مثل [type="text"] ، والفئات الزائفة (pseudo-classes) مثل 3 ؛ وتتميز هذه المحددات بمستوى متوسط ​​من التخصيص (specificity).

ملاحظة: ستتعرف على المزيد حول الفئات الزائفة (pseudo-classes) في الدروس القادمة.

في هذا المثال:

  • ستكون الفقرة الأولى باللون الأحمر لأن محدد المعرف (ID selector) يتمتع بخصوصية أعلى من محددات الفئات والأنواع (classes and type selectors).

  • ستكون الفقرة الثانية، التي تحمل مُحدِّد الفئة .example-para ، باللون الأخضر.

  • ستكون الفقرة الثالثة - التي تحمل كلاً من مُحدِّد المعرِّف #para-3 ومُحدِّد الفئة .example-para - باللون الأرجواني.

  • سيكون لعنصر الفقرة المتبقي لون أزرق.

index.html


<link rel="stylesheet" href="styles.css" >

<p id="para-1">فقرة نموذجية</p>
<p class="example-para">فقرة أخرى</p>
<p id="para-3" class="example-para">فقرة أخرى</p>
<p>فقرة أخرى أخرى</p>

styles.css


#para-1  {
  color: red;
}

#para-3  {
  color: purple;
}

.example-para  {
  color: green;
}

p  {
  color: blue;
}

معاينة:


مُحدِّدات النوع والعناصر الزائفة Type Selectors and Pseudo-Elements :

تتمتع مُحدِّدات النوع (مثل div و h1) والعناصر الزائفة (مثل ::before و ::after) بخصوصية (specificity) أقل مقارنةً بالمجموعات السابقة.

ملاحظة: ستتعرف على المزيد حول العناصر الزائفة (pseudo-elements) في دروس قادمة.

index.html


<link rel="stylesheet" href="styles.css" >

<p id="para-1">فقرة نموذجية</p>
<p>فقرة أخرى</p>
<p>فقرة أخرى</p>
<p>فقرة أخرى أخرى</p>

styles.css


#para-1  {
  color: red;
}

p  {
  color: blue;
}

معاينة:


المُحدِّد الشامل The Universal Selector :

وأخيراً، فإن المُحدِّد الشامل (universal selector) - الذي يُرمز إليه بعلامة النجمة * - هو الأقل تحديداً (specificity) على الإطلاق.

إليك مثال على تعيين اللون الأحمر لجميع العناصر باستخدام المُحدِّد *. ومع ذلك، لن تظهر أي عناصر باللون الأحمر؛ لأن هناك مُحدِّدات تعتمد على المُعرِّف (ID) والنوع (type) تتجاوز تلك الأنماط، مما يُبرز انخفاض مستوى التحديد (specificity) الخاص بالمُحدِّد *.

index.html


<link rel="stylesheet" href="styles.css" >

<p id="para-1">فقرة نموذجية</p>
<p>فقرة أخرى</p>
<p>فقرة أخرى أخرى</p>

styles.css


*  {
  color: red;
}

#para-1  {
  color: green;
}

p  {
  color: blue;
}

معاينة:


حساب قيم النوعية Calculating Specificity Values :

تُحسَب قيم النوعية كقيمة مكونة من أربعة أجزاء (a, b, c, d) :

  • a : الأنماط المضمنة Inline styles - (1 أو 0).

  • b : عدد محددات المعرِّف (ID selectors).

  • c : عدد محددات الفئات (class selectors)، ومحددات السمات (attribute selectors)، والفئات الزائفة (pseudo-classes).

  • d : عدد محددات النوع (type selectors)، والعناصر الزائفة (pseudo-elements)، والمحددات الشاملة (universal selectors).

يحمل كل جزء من قيمة التحديد وزناً مختلفاً:

  • تتمتع الأنماط المضمنة (Inline styles) a بأعلى وزن، حيث تساهم بقيمة 1 في الجزء الأول من قيمة التحديد (specificity value).

  • تأتي مُحدِّدات المُعرِّفات (ID selectors) b في المرتبة التالية من حيث الوزن، حيث يُسهم كل مُعرِّف (ID) بمقدار 1 في الجزء الثاني من قيمة التحديد (specificity value).

  • تتمتع محددات الفئات (class selectors)، ومحددات السمات (attribute selectors)، والفئات الزائفة (pseudo-classes) c بوزن متوسط، حيث يساهم كل منها بمقدار 1 في الجزء الثالث من قيمة التحديد (specificity value).

  • تتمتع مُحدِّدات النوع (Type selectors) والعناصر الزائفة (pseudo-elements) d بأدنى وزن، حيث يُسهم كل منها بمقدار 1 في الجزء الرابع من قيمة التحديد (specificity value).

  • المُحدِّد الشامل Universal selector (*) : يُسهم المُحدِّد العام بقيمة 0 في حساب درجة التخصيص (specificity) ولا يؤثر عليها؛ إذ لا يؤدي تضمينه في المُحدِّد إلى تغيير قيمة درجة التخصيص.

"سي.اس.اس المضمنة" Inline CSS :

تتمتع أنماط CSS المضمنة (Inline CSS) بأعلى درجات التحديد (specificity) لأنها تُطبَّق مباشرةً على العنصر؛ فهي تتفوق على أي أنماط CSS داخلية (internal) أو خارجية (external). وتبلغ قيمة التحديد للأنماط المضمنة (1, 0, 0, 0).

إليك مثال آخر على النمط المضمّن (inline style) : 


<p style="color: red;">هذا النص أحمر.</p>

معاينة:


"سي.اس.اس الداخلي" Internal CSS :

يتم تعريف CSS الداخلي (Internal CSS) داخل عنصر style في قسم head من مستند HTML، وتكون درجة تخصيصه (specificity) أقل من درجة تخصيص الأنماط المضمنة (inline styles). أما CSS الداخلي والخارجي فيشتركان في نفس مستوى التخصيص؛ إذ تتحدد درجة التخصيص بناءً على المُحدِّدات (selectors) المستخدمة، وليس بناءً على مكان تعريف كود CSS. وعندما تتساوى درجتا تخصيص قاعدتين، فإن القاعدة التي ترد لاحقاً في المستند هي التي تُطبَّق؛ لذا، إذا تم ربط ملف أنماط خارجي بعد كتلة أنماط style داخلية، تكون الأولوية للقواعد الخارجية، أما إذا تم ربطه قبلها، فتكون الأولوية للقواعد الداخلية.

تُحدد قيمة "الخصوصية" (specificity) للأنماط الداخلية (internal styles) بناءً على المُحدِّدات المستخدمة؛ فعلى سبيل المثال، يمتلك مُحدِّد المُعرِّف (ID selector) ضمن كود CSS الداخلي قيمة خصوصية تبلغ (0, 1, 0, 0). 


<head>
 <style>
  #text {
   color: blue;
  }
 </style>
</head>
<body>
 <div id="text">هذا النص أزرق.</div>
</body>

معاينة:

في هذا المثال، سيكون النص باللون الأزرق ما لم يتم تطبيق نمط مضمّن (inline style) أو مُحدِّد (selector) أكثر تحديداً.

"سي.اس.اس خارجي" External CSS :

يتم ربط ملفات CSS الخارجية (External CSS) عبر عنصر link في قسم head ، وتُكتب هذه الملفات في ملفات منفصلة ذات الامتداد .css. ومثل CSS الداخلية (internal)، تتحدد درجة أولوية (أو خصوصية) الأنماط الخارجية بناءً على المُحدِّدات (selectors) المستخدمة. وتوفر CSS الخارجية أفضل مستوى من سهولة الصيانة للمشاريع الكبيرة.

تُحدَّد قيمة "الخصوصية" (specificity) للأنماط الخارجية أيضًا بناءً على المُحدِّدات المستخدمة؛ فعلى سبيل المثال، يمتلك مُحدِّد الفئة (class selector) داخل ملف CSS خارجي قيمة خصوصية تعادل (0, 0, 1, 0).

index.html


<head>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
 <div class="text">يتم تحديد لون هذا النص في ملف CSS خارجي.</div>
</body>

styles.css


.text  {
  color: purple;
}

معاينة:

في هذا المثال، يتم تحديد لون النص في ملف styles.css وسيتم تطبيقه ما لم يتم تجاوزه بواسطة مُحدِّد أكثر تحديداً أو نمط مُضمَّن (inline style).

أسئلة :

أيُّ درجة تخصيص (Specificity) في CSS أعلى؟

1. مُحدِّد فئة (Class selector). ❌

2. نمط مُضمَّن (Inline style). ✅

3. مُحدِّد مُعرِّف (ID selector). ❌

4. مُحدِّد نوع (Type selector). ❌


في التسلسل الهرمي لخصوصية CSS، ما هو العنصر الذي يحظى بأدنى أولوية؟

1. مُحدِّدات الفئات (Class selectors) . ❌

2. الأنماط المضمنة (Inline styles) . ❌

3. المُحدِّدات الشاملة (Universal selectors) . ✅

4. مُحدِّدات المعرّفات (ID selector) . ❌


ما لون النص في المثال التالي؟


<head>
 <style>
  p {
   color: red;
  }
 </style>
</head>
<body>
 <p style="color: blue;">هذا النص</p>
</body>

1. أزرق blue. ✅

2. أحمر red. ❌

3. أصفر yellow. ❌

4. أخضر green. ❌