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  Wolfenstein: The Old Blood (+5 Trainer)

استخدام العنصر الفرعي :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  New Strike the Blood Video Anime's Promo Video Reveals Title, New Cast, Staff

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