ما هي أمثلة الفئات الزائفة Pseudo-classes ذات البنية الشجرية Tree-structural ؟

نظري

تتيح لك الفئات الزائفة ذات البنية الشجرية (Tree-structural pseudo-classes) استهداف العناصر وتنسيقها بناءً على موقعها داخل شجرة المستند. ويُقصد بشجرة المستند "البنية الهرمية" (The hierarchical structure) للعناصر في مستند HTML.

إليك قائمة بالفئات الزائفة ذات البنية الشجرية (tree-structural pseudo-classes) :

:root
:empty
:nth-child(n)
:nth-last-child(n)
:first-child
:last-child
:only-child
:nth-of-type
:first-of-type
:last-of-type
:only-of-type

لنلقِ نظرة فاحصة على كل من الفئات الزائفة ذات البنية الشجرية (tree-structural pseudo-classes)، مع إدراج أمثلة توضيحية.

الفئة الزائفة :root

تُشير الفئة الزائفة :root عادةً إلى عنصر الجذر html. وهي تساعدك على استهداف المستوى الأعلى في المستند، مما يتيح لك تطبيق نمطٍ موحّد على المستند بأكمله.

index.html


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

<h1>مرحباً بك في موقعي الإلكتروني</h1>
<p>هذه فقرة نموذجية لتوضيح الفئة الزائفة :root</p>

styles.css


:root {
 background-color: black;
 color: aliceblue;
}

معاينة:

مرحباً بك في موقعي الإلكتروني

هذه فقرة نموذجية لتوضيح الفئة الزائفة :root

تُستخدم الفئة الزائفة :root أيضاً بشكل شائع في تعيين متغيرات سي.اس.اس (CSS variables) :


:root {
 --main-font: 'Arial, sans-serif';
 --primary-color: blue;
 --secondary-color: green;
}

تتيح لك متغيرات سي.اس.اس (CSS variables) تخزين القيم (store values) وإعادة استخدامها في ملف الأنماط (stylesheet) الخاص بك. ستتعرف على المزيد حول هذا الموضوع لاحقاً.

الفئة الزائفة :empty

تُدرج العناصر الفارغة (Empty elements) — أي العناصر التي لا تحتوي على أي عناصر فرعية سوى المسافات البيضاء (white space) — ضمن شجرة المستند. ولهذا السبب، توجد الفئة الزائفة :empty التي تتيح استهداف هذه العناصر الفارغة. فعلى سبيل المثال، يحتوي كود HTML التالي على عنصرين فارغين ضمن قائمة؛ وباستخدام الفئة الزائفة :empty ، يمكنك تطبيق تنسيقات مختلفة على هذين العنصرين:

index.html


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

<ul>
 <li>العنصر 1</li>
 <li></li> <!-- This list is empty هذه القائمة فارغة -->
 <li>العنصر 2</li>
 <li></li> <!-- This list is empty هذه القائمة فارغة -->
 <li>العنصر 3</li>
</ul>

styles.css


:empty {
 background: black;
}

معاينة:

العنصر 1
العنصر 2
العنصر 3

ربما يكون التصرف الأكثر عمليةً فيما يخص عناصر القائمة الفارغة (the empty list items) هو عدم عرضها (not displaying them) على الإطلاق:

index.html


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

<ul>
 <li>العنصر 1</li>
 <li></li> <!-- This list is empty هذه القائمة فارغة -->
 <li>العنصر 2</li>
 <li></li> <!-- This list is empty هذه القائمة فارغة -->
 <li>العنصر 3</li>
</ul>

styles.css


:empty {
 display: none;
}

معاينة:

العنصر 1
العنصر 2
العنصر 3

الفئتان الزائفتان :nth-child(n) و :nth-last-child(n)

تتيح لك :nth-child(n) اختيار العناصر بناءً على موقعها داخل عنصر أب (parent)، بينما تمكّنك :nth-last-child(n) من اختيار العناصر عن طريق العدّ من النهاية. يمكن أن تكون n رقماً محدداً أو كلمة مفتاحية مثل odd (فردي) أو even (زوجي). وتُعد هذه الميزة مفيدة للغاية عند تنسيق خلايا الجداول بناءً على موقعها، سواء كانت في ترتيب زوجي أو فردي.

إليك مثال بلغة HTML لجدول يتضمن قائمة بأسعار الفاكهة. يستخدم كود CSS الفئة الزائفة (pseudo-class) المسماة :nth-child لاستهداف خلايا الجدول بناءً على ترتيبها، سواء كانت في مواقع فردية (odd) أو زوجية (even) :

index.html


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

<table>
 <tr>
  <th>العنصر</th>
  <th>السعر</th>
 </tr>
 <tr>
  <td>تفاح</td>
  <td>$1.00</td>
 </tr>
 <tr>
  <td>موز</td>
  <td>$0.50</td>
 </tr>
 <tr>
  <td>برتقال</td>
  <td>$0.80</td>
 </tr>
</table>

styles.css


th, td {
 border: 1px solid lightgray;
 padding: 8px;
}
tr:nth-child(even) {
 background-color: orangered;
}
tr:nth-child(odd) {
 background-color: lightgreen;
}

معاينة:

العنصر	السعر
تفاح	$1.00
موز	$0.50
برتقال	$0.80

الفئات الزائفة :first-child و :last-child و :only-child

تعمل الفئات الزائفة (pseudo-classes) المتمثلة في :first-child و :last-child و :only-child على العناصر الموجودة داخل حاوية أب (parent container) أو في المستند بأكمله.

:first-child يختار العنصر الأول ضمن عنصر أب (parent element) أو ضمن المستند.
:last-child يختار العنصر الأخير ضمن عنصر أب (parent element) أو ضمن المستند.
:only-child يختار العنصر الوحيد ضمن عنصر أب (parent element) أو ضمن المستند.

سيؤدي استخدام الفئتين الزائفين :first-child و :last-child إلى تحديد كل من العنصر الأول والعنصر الثالث في هذا المثال:

index.html


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

<ul>
 <li>العنصر الأول</li>
 <li>العنصر الثاني</li>
 <li>العنصر الثالث</li>
</ul>

styles.css


li:first-child {
 background-color: orangered;
}

li:last-child {
 background-color: lightgreen;
}

معاينة:

العنصر الأول
العنصر الثاني
العنصر الثالث

إذا كان هناك المزيد من القوائم غير المرتبة (unordered lists) في الصفحة، فيجب عليك أن تكون أكثر دقة (more specific) في عملية الاختيار:

لتوضيح كيفية عمل الفئة الزائفة :only-child ، إليك مثال بلغة HTML يتضمن عنصرين منفصلين من نوع div. يضمن استخدام الفئة الزائفة :only-child اختيار عنصر div الذي يحتوي على ابن واحد فقط (single child) :

index.html


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

<div class="container">
 <div>هذا هو العنصر الوحيد في هذه الحاوية.</div>
</div>

<div class="container">
 <div>هذا أحد عنصرين موجودين في هذه الحاوية.</div>
 <div>وهذا هو العنصر الثاني.</div>
</div>

styles.css


.container div:only-child {
 border: 2px solid crimson;
 padding: 10px;
 background-color: lightblue;
}

معاينة:

هذا هو العنصر الوحيد في هذه الحاوية.

هذا أحد عنصرين موجودين في هذه الحاوية.

وهذا هو العنصر الثاني.

الفئتان الزائفتان :first-of-type و :last-of-type

تُستخدم الفئات الزائفة (pseudo-classes) من النوعين :first-of-type و :last-of-type لاختيار أول وآخر ظهور لنوع معين من العناصر داخل عنصره الأب (parent). وتعد هذه الفئات مفيدة لتطبيق تنسيقات فريدة على أول أو آخر مثيل من ذلك النوع من العناصر ضمن مجموعة العناصر الشقيقة له.

في المثال أدناه، يُطبَّق كل من :first-of-type و :last-of-type على العنصر الأول والعنصر الأخير داخل عنصر section :

index.html


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

<section>
 <h2>المقدمة</h2>
 <p>هذه هي الفقرة الأولى في القسم الأول</p>
 <p>هذه هي الفقرة الثانية في القسم الأول</p>
</section>

<section>
 <h2>التفاصيل</h2>
 <p>هذه هي الفقرة الأولى في القسم الثاني.</p>
 <p>هذه هي الفقرة الثانية في القسم الثاني.</p>
</section>

styles.css


section p:first-of-type {
 background-color: lightgreen;
}

section p:last-of-type {
 background-color: lightblue;
}

معاينة:

المقدمة

هذه هي الفقرة الأولى في القسم الأول

هذه هي الفقرة الثانية في القسم الأول

التفاصيل

هذه هي الفقرة الأولى في القسم الثاني.

هذه هي الفقرة الثانية في القسم الثاني.

الفئة الزائفة :nth-of-type(n)

يسمح لك المُحدد :nth-of-type(n) باختيار عنصرٍ مُعينٍ داخل عنصره الأب (parent)، وذلك بناءً على ترتيبه بين العناصر الشقيقة التي تنتمي إلى النوع ذاته. على سبيل المثال، في كود HTML أدناه، يستهدف المُحدد :nth-of-type(2) العنصر الثاني داخل الحاوية:

index.html


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

<div>
 <p>الفقرة الأولى</p>
 <p>الفقرة الثانية</p>
 <p>الفقرة الثالثة</p>
</div>

styles.css


p:nth-of-type(2) {
 color: red;
 font-weight: bold;
}

معاينة:

الفقرة الأولى

الفقرة الثانية

الفقرة الثالثة

الفئة الزائفة :only-of-type

يختار المُحدد :only-of-type عنصراً ما إذا كان هو العنصر الوحيد من نوعه ضمن عنصره الأب (parent). ويمكن الاستفادة من ذلك في إبراز العناصر الفردية، أو ضمان حصولها على تنسيق مختلف عندما لا تكون جزءاً من مجموعة.

في المثال أدناه، يوجد عنصران من نوع div ؛ أحدهما يحتوي على عنصر واحد. يتم تطبيق تنسيق CSS على الحاوية الأولى فقط:

index.html


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

<div class="container">
 <p>الفقرة الوحيدة</p>
</div>

<div class="container">
 <p>الفقرة الأولى</p>
 <p>الفقرة الثانية</p>
</div>

styles.css


p:only-of-type {
 border: 4px solid green;
}

معاينة:

الفقرة الوحيدة

الفقرة الأولى

الفقرة الثانية

أسئلة :

ما الفرق بين الفئتين الزائفين :first-of-type و :last-of-type ؟

1. تستهدف :first-of-type أول عنصر من نوع معين داخل العنصر الأب، بينما تستهدف :last-of-type آخر عنصر من نوع مختلف. ❌

2. تستهدف كل من :first-of-type و :last-of-type أول ظهور لعنصر لكن في أقسام مختلفة من المستند. ❌

3. تختار :first-of-type أول ظهور لنوع عنصر معين داخل العنصر الأب، بينما تختار :last-of-type آخر ظهور لنفس نوع العنصر داخل العنصر الأب. ✅

4. تطبق :last-of-type التنسيقات على أول وآخر العناصر داخل المستند، بينما تطبق :last-of-type التنسيقات على جميع العناصر من نوع معين. ❌

ما الفرق بين الفئتين الزائفين :first-child و :last-child ؟

1. تستهدف :first-child أول عنصر داخل العنصر الأب، بينما تستهدف :last-child آخر عنصر داخل عنصر أب مختلف. ❌

2. تستهدف :first-child أول عنصر داخل العنصر الأب، بينما تستهدف :last-child آخر عنصر داخل نفس العنصر الأب. ✅

3. تستهدف :first-child أول عنصر من نوع معين داخل العنصر الأب، بينما تستهدف :last-child آخر عنصر من نوع مختلف داخل العنصر الأب. ❌

4. تستهدف :first-child أول وآخر العناصر داخل العنصر الأب، بينما تستهدف :last-child جميع العناصر الأخرى. ❌

ما هي الفئة الزائفة (pseudo-class) التي تتيح لك استهداف العناصر التي لا تحتوي على أي عناصر أبناء، بما في ذلك العناصر التي لا تحتوي إلا على مسافات بيضاء؟

1. :empty ✅

2. :first-child ❌

3. :last-child ❌

4. :only-of-type ❌

→ السابق التالي ←