x

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

ما درجة أولوية مُحدِّدات الفئة (Class Selectors) ؟

نظري

تُعد مُحدِّدات الفئة (Class selectors) جزءاً أساسياً من لغة CSS، إذ تتيح للمطورين استهداف عناصر متعددة تحمل نفس سمة الفئة وتطبيق تنسيق موحّد عليها.

وهذا يجعلها عالية المرونة والكفاءة في تطبيق الأنماط (styles) عبر الموقع الإلكتروني.

يتم تعريف مُحدِّدات الفئة (Class selectors) بنقطة (.) تليها تسمية الفئة (class name)، ويمكن تطبيقها على أي عنصر في مستند HTML.

إليك مثال يستخدم مُحدِّد الفئة (class selector) :

index.html


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

<p class="highlight">فقرة نموذجية</p>

styles.css


.highlight  {
  color: green;
}

معاينة:

في هذا المثال، سيتم تعيين لون النص باللون الأخضر green لأي عنصر يحمل الفئة highlight.

تتمتع محددات الفئة (Class selectors) بمستوى أعلى من التحديد مقارنةً بمحددات النوع (type selectors)، ولكنها أقل من محددات المعرفات (ID selectors) والأنماط المضمنة (inline styles).

قيمة التحديد (specificity) لمُحدِّد الفئة (class selector) هي (0, 0, 1, 0). وهذا يعني أن مُحدِّدات الفئة يمكنها تجاوز مُحدِّدات النوع (type selectors)، ولكن يمكن تجاوزها هي نفسها بواسطة مُحدِّدات المُعرِّف (ID selectors) والأنماط المضمنة (inline styles).

يمكن دمج مُحدِّدات الفئات (class selectors) مع مُحدِّدات أخرى لإنشاء قواعد أكثر تحديداً.

إليك مثال يجمع بين مُحدِّد نوع (type selector) الفقرة ومُحدِّد الفئة (class selector) :

index.html


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

<p class="bold-text">فقرة نموذجية</p>
<p class="bold-text">فقرة نموذجية</p>
<p>فقرة أخرى</p>
<p>فقرة أخرى أخرى</p>

styles.css


p.bold-text  {
  font-weight: bold;
}

معاينة:

تنطبق هذه القاعدة فقط على عناصر p التي تحتوي أيضًا على فئة bold-text ، مما يجعل نصها غامقًا (text bold).

أسئلة :

ما هي قيمة التحديد (specificity) الخاصة بمُحدِّد الفئة (class selector) مثل .example ؟

1. (1, 0, 0, 0) ❌

2. (0, 1, 0, 0) ❌

3. (0, 0, 1, 0) ✅

4. (0, 0, 0, 1) ❌


أيٌّ من المُحدِّدات التالية يتمتَّع بخصوصية (specificity) أعلى من مُحدِّد الفئة (class selector)؟

1. مُحدِّد النوع (Type selector). ❌

2. مُحدِّد المُعرِّف (ID selector). ✅

3. المُحدِّد الشامل (Universal selector). ❌

4. العنصر الزائف (Pseudo-element). ❌


بناءً على كود CSS التالي، ما هو لون النص؟


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

1. أخضر green. ❌

2. أزرق blue. ❌

3. أحمر red. ✅

4. أرجواني purple. ❌