More

[ دورة CSS ] الدروس المتقدمة CSS – الدرس السادس – التأثيرات الخاصة 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 بالاضافة الى النسخ الأقدم

READ  4 علاجات منزلية لعلاج اسمرار الإبط

استخدام العنصر الفرعي :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

المنتقى مثال شرح المثال
:link a:link اختيار جميع الروابط التشعبية التي لم يتم فتحها بعد
:visited a:visited اختيار جميع الروابط التشعبية التي تم فتحها
:active a:active اختيار جميع الروابط التشعبية الفعالة
:hover a:hover اختيار الروابط عند تمرير الماوس فوقهم
:focus input:focus اختيار العنصر المدخل المركز عليه
:first-letter p:first-letter اختيار الحرف الأول من العنصر <p>
:first-line p:first-line اختيار السطر الأول من العنصر <p>
:first-child p:first-child اختيار جميع العناصر المتمركزة في الصف الأول الابن من عناصر الأب
:before p:before ادراج محتوى قبل كل عنصر <p>
:after p:after ادراج محتوى بعد كل عنصر <p>
:lang(language) p:lang(it) اختيار لغة العنصر من خلال اللاحقة lang=”it”
READ  [ دورة CSS ] الصندوق النموذجي CSS - الدرس الخامس - الهوامش الداخلية Padding
Tags
Show More

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected

Please consider supporting us by disabling your ad blocker
Inline
Inline