ما هي العناصر الزائفة Pseudo-elements ؟
تتيح لنا العناصر الزائفة في لغة CSS تصميم عناصر أو أجزاء من العناصر دون إضافة أي معرفات أو فئات إليها. تكمن فائدتها في المواقف التي نريد فيها فقط تطبيق خصائص على الحرف الأول من الفقرة أو إذا كنا نريد إدراج بعض المحتوى قبل أو بعد عنصر ما وما إلى ذلك فقط من خلال ورقة أنماط CSS.
تبدأ العناصر الزائفة بنقطتين رأسيتين مكررتين (::). ويكون بناء الجملة لمحددات العناصر الزائفة بالشكل التالي:
selector::pseudo-element { property: value };
في هذا الدرس سوف نتعلم العناصر الزائفة الأكثر إستخداما.
first-line::
يطبق العنصر الزائف ::first-line خصائص خاصة على السطر الأول من النص.
في المثال التالي سنقوم بتنسيق السطر الأول من النص في فقرة. يعتمد طول السطر الأول على حجم نافذة المتصفح أو العنصر المحتوي.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>::first-line</title>
<style>
body {
font-size: 20px;
}
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>
المخرجات
خصائص CSS التي يمكن تطبيقها على العنصر الزائف ::first-line هي:
الخطوط و الخلفيات و الألوان و word-spacing و letter-spacing و text-decoration و vertical-align و text-transform و line-height .
first-letter::
يستخدم العنصر ::first-letter لإضافة نمط خاص إلى الحرف الأول من السطر الأول من النص. في المثال التالي سنقوم بتنسيق الحرف الأول من فقرة النص بجعله أكبر وبلون مختلف
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>::first-letter</title>
<style>
body{
font-size:20px;
}
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
</style>
</head>
<body>
<p>The first letter of this paragraph is styled differently.</p>
</body>
</html>
المخرجات
خصائص CSS التي يمكن تطبيقها على العنصر الزائف ::first-letter هي:
الخطوط و الألوان و الهوامش و الحواشي و الحدود و الخلفيات و word-spacing و letter-spacing و text-decoration و float و vertical-align (فقط في حال كانت قيمة الخاصية float هي none ) و text-transform و line-height.
before:: و after::
يمكننا استخدام العناصر الزائفة ::before و ::after لإدراج محتوى تم إنشاؤه إما قبل أو بعد محتوى العنصر. تُستخدم الخاصية content جنبًا إلى جنب مع هذه العناصر الزائفة ، لإدراج المحتوى الذي تم إنشاؤه.
يمكننا إدراج سلاسل نصية عادية أو كائن مضمن مثل الصورة والموارد الأخرى باستخدام هذه العناصر الزائفة.
<!DOCTYPE html>
<html>
<head>
<base href="https://educationfactorys.com/"/>
<meta charset="utf-8">
<title>CSS ::before and ::after</title>
<style>
h1::before , h1::after {
content: url("examples/images/seedling-solid.svg");
}
</style>
</head>
<body>
<h1>عنوان الصفحة</h1>
</body>
</html>
المخرجات
محددات الفئات و محددات العناصر الزائفة css
على سبيل المثال إذا اردنا تحديد لون للسطر الاول من فقرة معينة فقط من النص في هذه الحالة نحتاج لدمج العناصر الزائفة مع محددات الفئات.
يمكننا دمج العناصر الزائفة مع محددات الفئات لإنتاج تأثير خاص للعناصر التي تحتوي على تلك الفئة.
في المثال التالي سيتم عرض الحرف الأول من كل الفقرات التي تحتوي على السمة class="article" باللون الأخضر وبحجم xx-large.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pseudo-element with Classes</title>
<style>
p.article::first-letter {
color: #00ff00;
font-size: xx-large;
}
</style>
</head>
<body>
<p class="article">This a sample article.</p>
<p>This a normal paragraph.</p>
</body>
</html>
المخرجات
