التأثيرات الخاصة مع العناصر Pseudo-elements

تستخدم التأثيرات الخاصة مع العناصر لاضافة تأثيرات معينة لبعض المنتقون selectors


تركيبة الكود

ان تركيبة التأثيرات الخاصة مع العناصر هي كالتالي منتقى ثم “:” ثم العنصر ثم بين أقواس مائلة الخاصية والقيمة

selector:pseudo-element {property:value;}

يمكن استدعاء تصميم معين مع التأثيرات الخاصة

selector.class:pseudo-element {property:value;}

اضافة التأثيرات للسطر الأول :first-line

تستخدم السطر الأول “first-line” لإضافة تصميم خاص للسطر الأول للنص

في المثال التالي سيعرض المتصفح السطر الأول للفقرة p حسب التصميم المرفق مع التأثير “first-line”

مثال

p:first-line
{
color:#ff0000;
font-variant:small-caps;
}

ملاحظة : يمكن استخدام “first-line” فقط مع العنصر التي تشكل كتلاً أي تحت بعضها البعض

ملاحظة : يمكن للخواص التالية استخدام التأثير الخاص “first-line”

  • خاصية نوع الخط / font
  • خاصية اللون / color
  • خاصية الخلفية / background
  • تباعد الكلمات / word-spacing
  • تباعد الأحرف / letter-spacing
  • تصميم النص / text-decoration
  • المحاذاة الأفقية / vertical-align
  • تحويل النص / text-transform
  • ارتفاع السطر / line-height
  • المسح / clear

اضافة التأثيرات للحرف الأول :first-letter

تستخدم الحرف الأول “first-letter” لإضافة تصميم خاص للحرف الأول للنص

مثال

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}

ملاحظة : يمكن استخدام “first- letter” فقط مع العنصر التي تشكل كتلاً أي تحت بعضها البعض

ملاحظة : يمكن للخواص التالية استخدام التأثير الخاص “first- letter”

  • خاصية نوع الخط / font
  • خاصية اللون / color
  • خاصية الخلفية / background
  • الهوامش الخارجية / margin
  • الهوامش الداخلية / padding
  • الحدود / border
  • تصميم النص / text-decoration
  • المحاذاة الأفقية / vertical-align ( اذا كانت خاصية الطفو float معطلة )
  • تحويل النص / text-transform
  • ارتفاع السطر / line-height
  • الطفو / float
  • المسح / clear

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

يمكن الدمج بين التصميم الخاص CSS clases و التأثيرات الخاصة Pseudo-classes

p.article:first-letter {color:#ff0000;}

<p class="article">هذه مقالة</p>

سيظهر المثال السابق الحرف الأول من جميع الفقرات باللون الأحمر التي تحتوي التصميم الخاص class=”article”, ( عادة مايكون هذا المثال فعال مع اللغات الأجنبية وليست العربية )


التأثيرات الخاصة المتعددة

يمكن الدمج أيضاً مع تأثيرات خاصة متعددة

في المثال التالي الحرف الأول من الفقرة سيكون أحمر وبحجم خط كبير جداً جداً xx-large وباقي السطر الأول سيكون باللون الأزرق وبأحرف صغيرة . وباقي الفقرة سيكون باللون وحجم الخط الافتراضي ( عادة مايكون هذا المثال فعال مع اللغات الأجنبية وليست العربية )

مثال

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}

التأثيرات الخاصة باستخدام :before

تستخدم :before كتأثير خاص لاضافة محتوى جديد قبل المحتوى المذكور .

في هذا المثال سيتم اضافة صورة قبل كل عنوان كبير <h1>

h1:before
{
content:url(smiley.gif);
}

التأثيرات الخاصة باستخدام :after

تستخدم : after كتأثير خاص لاضافة محتوى جديد بعد المحتوى المذكور .

في هذا المثال سيتم اضافة صورة بعد كل عنوان كبير <h1>

h1:after
{
content:url(smiley.gif);
}

جميع خصائص التأثيرات الخاصة 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”