الرموز المزيفة في CSS

ما هو العنصر المزيف؟

تُستخدم العناصر المزيفة في CSS لضبط أنماط الأجزاء المحددة من العنصر.

على سبيل المثال، يمكن استخدامها لـ:

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

القواعد

قواعد العناصر المزيفة:

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

العنصر المزيف ::first-line

::first-line العناصر المزيفة تُستخدم لإنشاء أنماط خاصة للسطر الأول من النص.

مثال التالي يضيف أنماط إلى السطر الأول من جميع عناصر <p> النصية:

مثال

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

جربها بنفسك

ملاحظة:::first-line العناصر المزيفة يمكن تطبيقها فقط على العناصر المربعة.

تطبيق هذه الخاصية على ::first-line العناصر المزيفة:

  • خصائص الخط
  • خصائص اللون
  • خصائص الخلفية
  • 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> النصية:

مثال

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

جربها بنفسك

ملاحظة:::first-letter العناصر المزيفة تنطبق فقط على العناصر المربعة.

خصائص هذه العناصر التى تُستخدم في العنصر المزيف ::first-letter

  • خصائص الخط
  • خصائص اللون
  • خصائص الخلفية
  • خصائص الهوامش الخارجية
  • خصائص الهوامش الداخلية
  • خصائص الحدود
  • text-decoration
  • vertical-align (فقط عندما يكون "float" "none")
  • text-transform
  • line-height
  • float
  • clear

العناصر المزيفة وأنماط CSS

يمكن استخدام العناصر المزيفة مع الأنماط CSS:

مثال

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

جربها بنفسك

سيتم عرض الحرف الأول للفقرة التي تحتوي على class="intro" بلون أحمر وبحجم أكبر.

عدة عناصر مزيفة

يمكن دمج عدة عناصر مزيفة.

في المثال التالي، سيكون الحرف الأول للفقرة أحمر، وسيكون حجم الخط xx-large. سيكون الباقي من الفقرة بالحجم واللون الافتراضيين:

مثال

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>.

مثال

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

جربها بنفسك

CSS - العنصر المزيف ::selection

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

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

  • color
  • background
  • لوحة المؤشر
  • حدود

في المثال التالي، سيتم عرض النص المحدد على خلفية صفراء ويكون اللون أحمر:

مثال

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

جربها بنفسك

جميع العناصر المزيفة الخاصة بـ CSS

مصطنع مثال وصف المثال
::after p::after أضف محتوى بعد كل عنصر <p>.
::before p::before أضف محتوى قبل كل عنصر <p>.
::first-letter p::first-letter اختر الحرف الأول لكل عنصر <p>.
::first-line p::first-line اختر السطر الأول لكل عنصر <p>.
::selection p::selection اختيار جزء العنصر الذي يتم اختياره من قبل المستخدم.

كل الـ CSS pseudo-classes

مصطنع مثال وصف المثال
:active a:active اختيار كل رابط يكون نشطاً.
:checked input:checked اختيار كل عنصر <input> الذي يكون مختاراً.
:disabled input:disabled اختيار كل عنصر <input> الذي يكون غير مفعلاً.
:empty p:empty اختيار كل <p> الذي لا يكون له أي ابن.
:enabled input:enabled اختيار كل عنصر <input> الذي يكون مفعلاً.
:first-child p:first-child اختيار كل <p> التي تكون كأول ابن كوالد.
:first-of-type p:first-of-type اختيار كل <p> التي تكون كأول عنصر كوالد.
:focus input:focus اختيار كل عنصر <input> الذي يكون له التركيز.
:hover a:hover اختيار كل رابط يتم وضع السهم فوقه.
:in-range input:in-range اختيار كل عنصر <input> الذي يكون له قيمة في النطاق المحدد.
:invalid input:invalid اختيار كل عنصر <input> الذي يكون له قيمة غير صحيحة.
:lang(language) p:lang(it) اختيار كل <p> التي تكون قيمة الخاصية lang تبدأ بـ "it".
:last-child p:last-child اختيار كل <p> التي تكون كآخر ابن كوالد.
:last-of-type p:last-of-type اختيار كل <p> التي تكون كآخر عنصر كوالد.
:link a:link اختيار كل رابط لم يتم زيارتة.
:not(selector) :not(p) اختيار كل عنصر لا يكون <p>.
:nth-child(n) p:nth-child(2) اختيار كل عناصر <p> التي تكون الثانية كإبن للوالد.
:nth-last-child(n) p:nth-last-child(2) اختيار كل عناصر <p> التي تكون الثانية كإبن للوالد، من الابن الأخير بحساب.
:nth-last-of-type(n) p:nth-last-of-type(2) اختيار كل عناصر <p> التي هي الطفل الثاني من نوعها للعنصر الأم، من آخر الطفل.
:nth-of-type(n) p:nth-of-type(2) اختيار كل عناصر <p> التي هي العنصر الثاني من نوعها للعنصر الأم.
:only-of-type p:only-of-type اختيار كل عناصر <p> التي هي العنصر <p> الوحيد للعنصر الأم.
:only-child p:only-child اختيار العنصر <p> الذي هو الطفل الوحيد للعنصر الأم.
:optional input:optional اختيار عناصر <input> التي لا تحتوي على الخاصية "required".
:out-of-range input:out-of-range اختيار عناصر <input> التي تحتوي على قيمة خارج النطاق المحدد.
:read-only input:read-only اختيار عناصر <input> التي تم تحديد الخاصية "readonly".
:read-write input:read-write اختيار عناصر <input> التي لا تحتوي على الخاصية "readonly".
:required input:required اختيار عناصر <input> التي تم تحديد الخاصية "required".
:root root اختيار العنصر الجذر للعنصر.
:target #news:target اختيار العنصر #news النشط حاليًا (انقر على URL يحتوي على اسم هذا الرابط المعلق).
:valid input:valid اختيار جميع عناصر <input> التي تحتوي على قيمة صالحة.
:visited a:visited اختيار جميع الروابط المزورعة.