x

العمل مع الفئات الزائفة Pseudo-Classes والعناصر الزائفة Pseudo-Elements في CSS

ما هي أمثلة الفئات الزائفة Pseudo-classes المتعلقة بالموقع Location ؟

نظري

تُستخدم الفئات الزائفة الخاصة بالموقع (Location pseudo-classes) لتنسيق الروابط والعناصر المُستهدفة (targeted) داخل المستند الحالي. وهي تتيح إمكانية تطبيق تنسيقات معينة بناءً على ما إذا كان الرابط قد زِيِرَ من قبل (visited)، أو ما إذا كان العنصر في حالة تركيز (focus) حالياً.

من أمثلة الفئات الزائفة المتعلقة بالموقع (location pseudo-classes) :

لنلقِ نظرةً أكثر تعمقاً على كلٍّ من هذه الفئات الزائفة (pseudo-classes).

تتيح لك الفئة الزائفة :link استهداف جميع الروابط التي لم تتم زيارتها في صفحة الويب. يمكنك استخدامها لتنسيق هذه الروابط بشكل مختلف قبل أن يقوم المستخدم بالنقر عليها؛ فعلى سبيل المثال، قد ترغب في جعل جميع الروابط غير المُزارة (unvisited links) تظهر باللون الأزرق (blue) أو باللون الأساسي لموقعك الإلكتروني (website's primary color).

index.html


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

<a target="_blank" href="https://www.example.com">تفضل بزيارة Example.com</a>

styles.css


a:link {
 color: magenta;
}

معاينة:

في هذه الحالة، سيظهر أي رابط (any link) لم يقم المستخدم بالنقر عليه بعد باللون الأرجواني (magenta). وبمجرد أن ينقر المستخدم على الرابط، يتوقف تطبيق النمط المرتبط بـ :link ، ويحل محله النمط الخاص بالفئة الزائفة :visited. تدخل الفئة الزائفة :visited حيز التنفيذ بعد قيام المستخدم بالنقر على الرابط، مما يتيح لك استهداف الروابط التي سبق للمستخدم النقر عليها.

إليك مثال على تغيير حالة الرابط الذي تمت زيارته إلى اللون البنفسجي purple :

index.html


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

<a target="_blank" href="https://www.example.com">تفضل بزيارة Example.com</a>

styles.css


a:visited {
 color: purple;
}

معاينة:

تساعد الفئة الزائفة :visited المستخدمين على التمييز بين الروابط التي زاروها وتلك التي لم يزوروها.

تُعد الفئة الزائفة :any-link مزيجاً من الفئتين الزائفيتين :link و :visited ؛ فهي تطابق أي عنصر رابط (anchor element) يحتوي على سمة href ، بغض النظر عما إذا كان قد تمت زيارته أم لا.

إليك مثال على تغيير لون الرابط الخاص بالفئة الزائفة :any-link إلى اللون القرمزي crimson :

index.html


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

<a target="_blank" href="https://www.example.com">تفضل بزيارة Example.com</a>

styles.css


a:any-link {
 color: crimson;
}

معاينة:


تستهدف الفئة الزائفة :local-link الروابط التي تشير إلى المستند نفسه. ويمكن أن تكون مفيدة عندما ترغب في التمييز بين الروابط الداخلية والروابط الخارجية. وفي الوقت الحالي، لا يدعم أي متصفح الفئة الزائفة :local-link.

تُستخدم الفئة الزائفة :target لاختيار عنصر يطابق مُعرِّف الجزء (fragment identifier) ​​في عنوان URL الحالي، على سبيل المثال: #section1. وتُعد هذه الميزة مفيدة للغاية في الصفحات التي تحتوي على تنقّل داخلي (in-page navigation).

إليك مثال بلغة HTML يمثل تنقلاً داخل الصفحة. تستخدم لغة CSS الفئة الزائفة :target لتنسيق القسم الذي يتوافق مع الوجهة التي ينتقل إليها المستخدم:

index.html


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

<nav id="table-of-contents">
 <ul>
  <li><a href="#section1">المقدِّمة</a></li>
  <li><a href="#section2">الميزات</a></li>
 </ul>
</nav>

<section id="section1">
 <h2>المقدمة</h2>
 <p>هذا هو قسم المقدمة.</p>
</section>

<section id="section2">
 <h2>المميزات</h2>
 <p>يستعرض هذا القسم المميزات.</p>
</section>

styles.css


section:target {
 background-color: green;
 border: 2px solid green;
 padding: 10px;
}

معاينة:

عندما ينقر المستخدم على أحد روابط التنقل (navigation links)، سيتغير لون خلفية (background color) القسم المقابل إلى اللون الأخضر (green).

أسئلة :

ما هي الفئة الزائفة (pseudo-class) التي تتيح لك تنسيق عنصر يطابق مُعرِّف جزء الرابط (URL fragment identifier) ​​الحالي، مثل #section1 ؟

1. :hover ❌

2. :focus ❌

3. :target ✅

4. :checked ❌


متى تكون الفئات الزائفة المتعلقة بالموقع (location pseudo-classes) مفيدة بشكل خاص؟

1. عند تنسيق العناصر بناءً على علاقاتها مع العناصر الشقيقة. ❌

2. عند تطبيق التنسيقات بناءً على ما إذا كان الرابط قد تمت زيارته أو كان العنصر في حالة التركيز (focus) حالياً. ✅

3. عند تنسيق العناصر بناءً على سمات العنصر الأب. ❌

4. عند تعديل تخطيط صفحة الويب بشكل ديناميكي. ❌


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

1. :any-link ❌

2. :local-link ✅

3. :visited ❌

4. :target ❌