Header Ads

التأثيرات الخاصة Pseudo-classes



تسمى التأثيرات الخاصة لأنها تضيف مزايا وتأثيرات خاصة للعنصر توهمك أن هذه التأثيرات من أساسه و لكن في الواقع هي فقط مصطنعة له



التركيبة


ان تركيبة التأثيرات الخاصة pseudo-classes هي :
selector:pseudo-class {property:value;}

أي نستخدم المنتقى ثم ":" ثم التأثير الحركي للعنصر ثم الخاصية والقيمة مثل a:link

اذا أردنا استدعاء تصميم خاص من خلال class (يمكنك مشاهدة درس class) عندها ستصبح التركيبة كالتالي
selector.class:pseudo-class {property:value;}

أي نستخدم المنتقى ثم اسم خاص قمنا بانشائه مثل .mystyle ثم التأثير ثم ":" ثم التأثير الحركي للعنصر ثم الخاصية والقيمة مثل a.mystyle:link



استخدام التأثيرات مع الرابط التشعبي a


يمكن عرض الروابط التشعبية من خلال العديد من الطرق المختلفة باستخدام CSS

مثال
a:link {color:#FF0000;} /* الرابط التشعبي */
a:visited {color:#00FF00;} /* الرابط الذي تم زيارته */
a:hover {color:#FF00FF;} /* عند وضع الفأرة على الرابط */
a:active {color:#0000FF;} /* بعد فتح الرابط */



ملاحظة

  • يجب استخدام a:hover بعد a:link و a:visited وذلك ليكون أكثر فاعلية

  • يجب استخدام a:active بعدa:hover وذلك ليكون أكثر فاعلية

  • ليس بحالة حساسة case-sensitive عند استخدام التأثيرات Pseudo-class





التصميم الخاص CSS clases و التأثيرات الخاصة Pseudo-classes


يمكن دمج التصميم الخاص Pseudo-classes مع CSS

مثال
a.red:visited {color:#FF0000;}
<a class="red" href="css/syntax-css">CSS تركيبة</a>


ان تم فتح الرابط في المثال السابق عندها سيتم تطبيق عليه التصميم الخاص وهو اللون الأحمر




العنصر الفرعي :first-child للتأثيرات الخاصة Pseudo-class


تستخدم خاصية العنصر الفرعي لتطبيق تصميم معين على عنصر معين اذا كان فرعاً من عنصر آخر ولايتم تطبيق التصميم على العنصر ان كان فرعاً لعنصر آخر غير معرف من خلال CSS وسيتم تقديم مثال مع شرحه لاحقاً في هذا الدرس

ملاحظة : ان تم تحديد نوع الصفحة <!DOCTYPE> فإن خاصية العنصر الفرعي :first-child ستعمل على متصفح IE8 بالاضافة الى النسخ الأقدم

استخدام العنصر الفرعي :first-child مع أول عنصر <p>


في هذا المثال سيتم تطبيق العنصر الفرعي لأول فقرة <p> باللون الأزرق , وعلى الرغم من أنه لدينا أكثر من فقرة فإن التصميم سيطبق على الفقرة الأولى فقط

مثال
<html>
<head>
<style type="text/css">
p:first-child
{
color:blue;
}
</style>
</head><body><p>المعهد العربي للبرمجة</p>
<p>المعهد العربي للبرمجة</p>
</body>
</html>




استخدام العنصر الفرعي :first-child مع أول <i> لجميع عناصر <p>


في هذا المثال سيتم تطبيق العنصر الفرعي مع أول <i> وهو وسم لجعل الخط مائل على جميع الفقرات الموجودة في صفحة الويب وفي المثال لدينا العنصر <i> ملون باللون الأزرق حسب كود التصميم .

عند عرض النتيجة على المتصفح على الرغم من ان كل فقرة تحتوي على كلمتان بالشكل المائل الا أننا قمنا بتلوين أول كلمة مائلة <i> والتي موجودة حصراً ضمن الفقرة <p>

مثال
<html>
<head>
<style type="text/css">
p > i:first-child
{
color:blue;
}
</style>
</head><body><p>المعهد <i>العربي</i> للبرمجة هو المعهد العربي<i> للبرمجة</i></p>
<p>المعهد <i>العربي</i> للبرمجة هو المعهد العربي<i> للبرمجة</i></p>
</body>
</html>




استخدام العنصر الفرعي :first-child مع جميع عناصر <i> لأول فقرة <p>


في هذا المثال سيتم تطبيق العنصر الفرعي لجميع عناصر <i> وهو وسم لجعل الخط مائل على أول فقرة موجودة في صفحة الويب وفي المثال لدينا العنصر <i> ملون باللون الأزرق حسب كود التصميم .

عند عرض النتيجة على المتصفح على الرغم من ان كل فقرة تحتوي على كلمتان بالشكل المائل الا أننا قمنا بتلوين جميع الكلمات المائلة <i> والتي موجودة حصراً ضمن أول فقرة <p>

مثال
<html>
<head>
<style type="text/css">
 p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>المعهد <i>العربي</i> للبرمجة هو المعهد العربي<i> للبرمجة</i></p>
<p>المعهد <i>العربي</i> للبرمجة هو المعهد العربي<i> للبرمجة</i></p>
</body>
</html>




استخدام التأثيرات Pseudo-class مع تحديد اللغة :lang


تسمح التأثيرات بتحديد قواعد خاصة للغات مختلفة :lang

ستعمل هذه الخاصية على متصفح IE8 ان تم تحديد نوع الصفحة <!DOCTYPE>

في المثال التالي خاصية :lang محددة باشارات الاقتباس للعنصر q بدون تحديد للغة lang="no"
<html>
<head>
<style type="text/css">
 q:lang(no)
{quotes: "~" "~";}
</style>
</head>
<body>
<p>هنا نص <q lang="no">اقتباس في فقرة</q> هنا نص</p>
</body>
</html>






جميع خصائص التأثيرات الخاصة Pseudo-classes
المنتقىمثالشرح المثال
:linka:linkاختيار جميع الروابط التشعبية التي لم يتم فتحها بعد
:visiteda:visitedاختيار جميع الروابط التشعبية التي تم فتحها
:activea:activeاختيار جميع الروابط التشعبية الفعالة
:hovera:hoverاختيار الروابط عند تمرير الماوس فوقهم
:focusinput:focusاختيار العنصر المدخل المركز عليه
:first-letterp:first-letterاختيار الحرف الأول من العنصر <p>
:first-linep:first-lineاختيار السطر الأول من العنصر <p>
:first-childp:first-childاختيار جميع العناصر المتمركزة في الصف الأول الابن من عناصر الأب
:beforep:beforeادراج محتوى قبل كل عنصر <p>
:afterp:afterادراج محتوى بعد كل عنصر <p>
:lang(language)p:lang(it)
اختيار لغة العنصر من خلال اللاحقة lang="it"




يتم التشغيل بواسطة Blogger.