العناصر الزائفة Pseudo-elements
ما هي العناصر الزائفة Pseudo-elements ؟
تتيح لنا العناصر الزائفة في لغة CSS تصميم عناصر أو أجزاء من العناصر دون إضافة أي معرفات أو فئات إليها. تكمن فائدتها في المواقف التي نريد فيها فقط تطبيق خصائص على الحرف الأول من الفقرة أو إذا كنا نريد إدراج بعض المحتوى قبل أو بعد عنصر ما وما إلى ذلك فقط من خلال ورقة أنماط CSS.
تبدأ العناصر الزائفة بنقطتين رأسيتين مكررتين (::). ويكون بناء الجملة لمحددات العناصر الزائفة بالشكل التالي:
- selector::pseudo-element { property: value };
في هذا الدرس سوف نتعلم العناصر الزائفة الأكثر إستخداما.
first-line::
يطبق العنصر الزائف ::first-line خصائص خاصة على السطر الأول من النص.
في المثال التالي سنقوم بتنسيق السطر الأول من النص في فقرة. يعتمد طول السطر الأول على حجم نافذة المتصفح أو العنصر المحتوي.
- p::first-line {
- color: #ff0000;
- font-variant: small-caps;
- }
خصائص CSS التي يمكن تطبيقها على العنصر الزائف ::first-line هي:
الخطوط و الخلفيات و الألوان و word-spacing و letter-spacing و text-decoration و vertical-align و text-transform و line-height .
first-letter::
يستخدم العنصر ::first-letter لإضافة نمط خاص إلى الحرف الأول من السطر الأول من النص. في المثال التالي سنقوم بتنسيق الحرف الأول من فقرة النص بجعله أكبر وبلون مختلف
- p::first-letter {
- color: #ff0000;
- font-size: xx-large;
- }
خصائص CSS التي يمكن تطبيقها على العنصر الزائف ::first-letter هي:
الخطوط و الألوان و الهوامش و الحواشي و الحدود و الخلفيات و word-spacing و letter-spacing و text-decoration و float و vertical-align (فقط في حال كانت قيمة الخاصية float هي none ) و text-transform و line-height.
before:: و after::
يمكننا استخدام العناصر الزائفة ::before و ::after لإدراج محتوى تم إنشاؤه إما قبل أو بعد محتوى العنصر. تُستخدم الخاصية content جنبًا إلى جنب مع هذه العناصر الزائفة ، لإدراج المحتوى الذي تم إنشاؤه.
يمكننا إدراج سلاسل نصية عادية أو كائن مضمن مثل الصورة والموارد الأخرى باستخدام هذه العناصر الزائفة.
- h1::before , h1::after {
- content: url("examples/images/seedling-solid.svg");
- }
محددات الفئات ومحددات العناصر الزائفة
على سبيل المثال إذا اردنا تحديد لون للسطر الاول من فقرة معينة فقط من النص في هذه الحالة نحتاج لدمج العناصر الزائفة مع محددات الفئات.
يمكننا دمج العناصر الزائفة مع محددات الفئات لإنتاج تأثير خاص للعناصر التي تحتوي على تلك الفئة.
في المثال التالي سيتم عرض الحرف الأول من كل الفقرات التي تحتوي على السمة class="article" باللون الأخضر وبحجم xx-large.
- p.article::first-letter {
- color: #00ff00;
- font-size: xx-large;
- }