30- عناصر الحالة الزائفة (Pseudo-elements) في CSS

عناصر الحالة الزائفة هي أدوات خاصة تستخدم في CSS لتعديل وتنسيق أجزاء محددة من

على سبيل المثال، يمكنك استخدام عناصر الحالة الزائفة لتحقيق الآتي:

• تنسيق الحرف الأول أو السطر الأول من النص داخل عنصر.
• إدراج محتوى إضافي قبل أو بعد المحتوى الأساسي للعنصر.

وتعتبر عناصر الحالة الزائفة مفيدة لإنشاء تأثيرات مرئية وإضافة عناصر تحكم تفاعلية إلى صفحات الويب.

قواعد كتابة عناصر الحالة الزائفة (Syntax):

pseudo-elements:

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

عنصر الحالة الزائفة ::first-line

يستخدم عنصر الحالة الزائفة ::first-line لإضافة تنسيق خاص للسطر الأول من النص.

المثال التالي يقوم بتنسيق السطر الأول للنص داخل جميع عناصر <p>:tunesharemore_vert

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

ملاحظات حول عنصر الحالة الزائفة ::first-line

• يُمكن تطبيق عنصر الحالة الزائفة ::first-line فقط على العناصر التي تعمل على مستوى كتلة (block-level elements).
• الخصائص التي يمكن تطبيقها على ::first-line:
  • خصائص الخط (font properties)
  • خصائص اللون (color properties)
  • خصائص الخلفية (background properties)
  • تباعد الكلمات (word-spacing)
  • تباعد الأحرف (letter-spacing)
  • تزيين النص (text-decoration)
  • محاذاة النص الرأسية (vertical-align)
  • تحويل النص (text-transform)
  • ارتفاع السطر (line-height)
  • مسح (clear)
• لاحظ علامة التعريف المزدوجة ::first-line مقابل :first-line
  • استُبدلت علامة التعريف المزدوجة بالعلامة المفردة لتمييز عناصر الحالة الزائفة عن فئات الحالة في CSS3. وكان هذا محاولة من W3C للتفريق بين فئات الحالة الزائفة وعناصر الحالة الزائفة.
• استُخدمت العلامة المفردة لكل من فئات الحالة الزائفة وعناصر الحالة الزائفة في CSS2 و CSS1.
• من أجل التوافق مع الإصدارات القديمة، يُعد استخدام العلامة المفردة مقبولا لعناصر الحالة الزائفة في CSS2 و CSS1.

عنصر الحالة الزائفة ::first-letter

يستخدم عنصر الحالة الزائفة ::first-letter لإضافة تنسيق خاص إلى الحرف الأول من النص.

على سبيل المثال، يوضح الكود التالي كيفية تنسيق الحرف الأول للنص داخل جميع عناصر <p>:

CSS

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

ملاحظات حول عنصر الحالة الزائفة ::first-letter

• يُمكن تطبيق عنصر الحالة الزائفة ::first-letter فقط على العناصر التي تعمل على مستوى كتلة (block-level elements).
• الخصائص التي يمكن تطبيقها على ::first-letter:
  • خصائص الخط (font properties)
  • خصائص اللون (color properties)
  • خصائص الخلفية (background properties)
  • خصائص الهامش (margin properties)
  • خصائص التبطين (padding properties)
  • خصائص الحدود (border properties)
  • تزيين النص (text-decoration)
  • محاذاة النص الرأسية (vertical-align) (فقط إذا كانت خاصية “float” مضبوطة على “none”)
  • تحويل النص (text-transform)
  • ارتفاع السطر (line-height)
  • تعويم (float)
  • مسح (clear)

فئات الحالة الزائفة (Pseudo-elements) والـفئات الخاصة بـ HTML (HTML Classes)

يمكن دمج فئات الحالة الزائفة مع الفئات الخاصة بـ HTML لتحقيق المزيد من التحكم بالتنسيق.

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

في المثال السابق، سيظهر الحرف الأول من الفقرات التي تحتوي على الصنف “intro” باللون الأحمر وبحجم أكبر.

عناصر الحالة الزائفة المتعددة

يمكن دمج عدة عناصر حالة زائفة مع بعضها البعض لتحقيق تنسيق أكثر تعقيدًا.

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

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

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

CSS – عنصر الحالة الزائفة ::before

يستخدم عنصر الحالة الزائفة ::before لإدراج محتوى قبل المحتوى الأصلي لأي عنصر.

في المثال التالي، يتم إدراج صورة قبل المحتوى الخاص بكل عنصر <h1>:

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

CSS – عنصر الحالة الزائفة ::after

يستخدم عنصر الحالة الزائفة ::after لإدراج محتوى بعد المحتوى الأصلي لأي عنصر.

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

CSS – عنصر الحالة الزائفة ::marker

يحدد عنصر الحالة الزائفة ::marker علامات عناصر القائمة (نقط أو رقم أو غيره).

المثال التالي يقوم بتنسيق علامات عناصر القائمة:

::marker {
  color: red;
  font-size: 23px;
}

CSS – عنصر الحالة الزائفة ::selection

يحدد عنصر الحالة الزائفة ::selection الجزء المحدد من قبل المستخدم داخل عنصر.

يمكن تطبيق خصائص CSS التالية على ::selection:

• color: لون النص المحدد
• background: لون خلفية النص المحدد
• cursor: شكل المؤشر عند تحريكه فوق النص المحدد
• outline: إطار (outline) حول النص المحدد

المثال التالي يجعل النص المحدد باللون الأحمر على خلفية صفراء:

::selection {
  color: red;
  background: yellow;
}