الكورس

Advertisements

فئات 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>
Normal Link
Visited Link
Hover Link
active Link

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

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

 

أسماء الـ Pseudo-classes ليست حساسة لحالة الأحرف.


 

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>

First child.

Second child.


 

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>
  • HTML
  • CSS
  • JS
  • PHP

 

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>
  • HTML
  • CSS
  • JS
  • PHP

Advertisements

 

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>
Donec rutrum congue leo eget malesuada.
Vivamus suscipit tortor eget felis porttitor volutpat.
Nulla porttitor accumsan tincidunt.
Donec rutrum congue leo eget malesuada.

 

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>

Donec rutrum congue leo eget malesuada.

Vivamus suscipit tortor eget felis porttitor volutpat.

Nulla porttitor accumsan tincidunt.


 

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>

Rutrum congue leo eget malesuada.

Tortor eget felis porttitor volutpat.

Eget felis accumsan tincidunt.


Advertisements

 

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>

First Paragraph

Second Paragraph

Third Paragraph


 

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>

First Paragraph

Second Paragraph

Third Paragraph


 

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>

I am paragraph

All rights reserved

Copyright © Albashmoparmeg


الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements