فئات CSS الزائفة | CSS Pseudo Classes

فى هذا الفصل سيتم شرح جميع فئات CSS الزائفة (CSS Pseudo Classes) بالتفصيل، مع بعض الأمثلة التوضيحية.

ما هى فئات CSS الزائفة؟

فئة CSS الزائفة هي كلمة تضاف إلى محدد يحدد حالة خاصة للعنصر (العناصر) المحددة. على سبيل المثال:

• يمكن استخدام hover: لتغيير لون الزر عند مرور مؤشر المستخدم فوقه.
• يمكن استخدام focus: لتصميم style مُعين عندما يضغط شخص على زر. وهكذا.

بناء جملة الـ pseudo-class، كالتالى:

selector:pseudo-class {
  property: value;
}

CSS Pseudo Classes

1. إستخدام الفئات الزائفة مع الروابط

يمكنك عرض الروابط بطرق مختلفة، كالتالى:

<style>
/* Normal link (unvisited) */
.normal_link:link {
  color: #F00;
}

/* link already visited */
.visited_link:visited {
  color: #00F;
}

/* Hover mouse over link */
.hover_link:hover {
  color: #0FF;
}

/* selected link */
.active_link:active {
  color: #000;
}
</style>

<a href="#" class="normal_link">Normal Link</a> <br />
<a href="#" class="visited_link">Visited Link</a> <br />
<a href="#" class="hover_link">Hover Link</a> <br />
<a href="#" class="active_link">active Link</a>

توضيح الفئات الزائفة التى تم إستخدامها فى المثال السابق:

1. a:link : يحدد رابط عادي unvisited (لونه أزرق).
2. a:visited: يحدد رابط قام المستخدم بزيارته (لونه أرجوانى).
3. a:hover : يحدد رابط قام المستخدم بالتمرير فوقه بإستخدام مؤشر الماوس (يؤدي التمرير فوق الرابط إلى تغيير مؤشر الماوس إلى رمز يد صغير).
4. a:active: يحدد رابط لحظة النقر عليه (لونه أحمر).
5. a:focus: يحدد رابط يتم التركيز أو عليه (هذا النوع من الروابط يتم وضع خط خارجى حوله).

2. first-child:

يقوم الـ first-child: بتحديد أول عنصر فرعى (child) من العنصر الأب (parent). كالتالى:

<style> 
    div p:first-child {
        color: #f00
    }
</style> 

<div>
    <p>First child.</p> 
    <p>Second child.</p>
</div>

3. ()nth-child:

تتطابق فئة ()nth-child: الزائفة مع العناصر بناءً على موقعها في مجموعة من الأشقاء siblings. كالتالى:

<style> 
li:nth-child(3) {
  color: blue;
  font-weight: bold;
}
</style>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>PHP</li>
</ul>

4. ()nth-last-child:

تطابق فئة CSS الزائفة ()nth-last-child: العناصر بناءً على موقعها بين مجموعة من الأشقاء ، بدءًا من النهاية. كالتالى:

<style> 
li:nth-last-child(3) {
  color: blue;
  font-weight: bold;
}
</style>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>PHP</li>
</ul>

5. only-child:

فئة CSS الزائفة only-child: تمثل عنصرًا بدون أي أشقاء. كالتالى:

<style> 
div:only-child {
  color: blue;
  font-weight: bold;
}
</style>

<div>
    <div>Donec rutrum congue leo eget malesuada. <div>Vivamus suscipit tortor eget felis porttitor volutpat.</div></div>
    <div>Nulla porttitor accumsan tincidunt.</div>
</div>

<div>
    <div>Donec rutrum congue leo eget malesuada.</div>
</div>

6. ()nth-of-type:

تطابق فئة CSS الزائفة ()nth-of-type: عناصر من نوع معين (اسم الوسم) ، بناءً على موقعها بين مجموعة من الأشقاء. كالتالى:

<style> 
p:nth-of-type(2) {
  color: blue;
  font-weight: bold;
}
</style>

<div>
    <p>Rutrum congue leo eget malesuada.</p>
    <p>Suscipit tortor eget felis porttitor volutpat.</p>
    <p>Accumsan tincidunt.</p>
</div>

7. ()nth-last-of-type:

تطابق فئة CSS الزائفة ()nth-last-of-type: عناصر من نوع معين ، بناءً على موقعها بين مجموعة من الأشقاء ، بدءًا من النهاية. كالتالى:

<style> 
p:nth-last-of-type(2) {
  color: blue;
  font-weight: bold;
}
</style>

<div>
    <p>Rutrum congue leo eget malesuada.</p>
    <p>Tortor eget felis porttitor volutpat.</p>
    <p>Eget felis accumsan tincidunt.</p>
</div>

8. ()first-of-type:

تمثل فئة CSS الزائفة first-of-type: العنصر الأول من نوعه بين مجموعة من العناصر الشقيقة sibling، كالتالى:

<style> 
p:first-of-type {
  color: blue;
  font-weight: bold;
}
</style>

<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>

9. ()last-of-type:

تحدد فئة CSS الزائفة first-of-type: العنصر الأخير من نوعه بين مجموعة من العناصر الشقيقة sibling، كالتالى:

<style> 
p:last-of-type {
  color: blue;
  font-weight: bold;
}
</style>

<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>

10. only-of-type:

فئة CSS الزائفة only-of-type: تحدد عنصرًا ليس له أشقاء من نفس النوع. كالتالى:

<style>
    footer:only-of-type { 
        color: #00f; 
        font-weight: bold;
    } 
</style>

<p>I am paragraph</p>
<footer>
    <p>All rights reserved</p>
    <div>Copyright © Albashmoparmeg</div>
</footer>