الكورس

Advertisements

عناصر CSS الزائفة | CSS Pseudo Elements


فى هذا الفصل سيتم شرح جميع عناصر CSS الزائفة (CSS Pseudo Elements) بالتفصيل مع بعض الأمثلة التوضيحية.


 

ما هى عناصر CSS الزائفة؟

 

عنصر CSS الزائف عبارة عن كلمة تضاف إلى محدد يتيح لك تصميم جزء معين من العنصر (العناصر) المحددة.

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

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

 

بناء جملة الـ pseudo-element، كالتالى:

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

 

CSS Pseudo Elements

 

before .1::

 

يمكن استخدام عنصر before:: لإدراج بعض المحتوى قبل محتوى العنصر. كالتالى:

<style>
p::before {
  content: "Hello ";
}
</style>

<p>Mohamed</p>

Mohamed


 

after .2::

 

يمكن استخدام عنصر after:: لإدراج بعض المحتوى بعد محتوى العنصر. كالتالى:

<style>
p::after {
  content: " Mohamed";
}
</style>

<p>Hello</p>

Hello


Advertisements

 

3. first-letter::

 

يتم استخدام عنصر first-letter:: لإجراء تغييرات على الحرف الأول من العنصر. كالتالى:

<style>
p::first-letter {
  font-weight: bold;
  font-size: 20px;
}
</style>

<p>Example of pseudo element.</p>

Example of pseudo element.


 

first-line .4::

 

يتم استخدام عنصر first-line:: لإجراء تغييرات على السطر الأول من العنصر. كالتالى:

<style>
p::first-line {
  color: blue;
}
</style>

<p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. 
    Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. 
    Proin eget tortor risus. Nulla quis lorem ut libero malesuada feugiat.
    Dui Proin eget tortor risus. Nulla quis lorem ut libero malesuada feugiat.
</p>

Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Nulla quis lorem ut libero malesuada feugiat. Dui Proin eget tortor risus. Nulla quis lorem ut libero malesuada feugiat.

لا يمكن تطبيق first-letter:: و first-line:: إلا على العناصر block-level.


 

selection .5::

 

يتطابق العنصر selection:: مع جزء العنصر الذي حدده المستخدم، مثل النقر بالماوس وسحبه عبر النص. كالتالى:

<style>
p::selection {
  color: white;
  background-color: red;
}
</style>

<p>Select me to show design!</p>

Select me to show design!


 

هل يمكن إستخدام أكثر من عنصر pseudo على نفس العنصر؟

 

نعم! يمكنك دمج العديد من عناصر الـ Pseudo على نفس العنصر، كالتالى:

<style>
p::first-line {
  color: blue;
}

p::first-letter {
  font-weight: bold;
  font-size: 20px;
}

p::selection {
  color: white;
  background-color: red;
}
</style>

<p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. 
    Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. 
    Proin eget tortor risus. Nulla quis lorem ut libero malesuada feugiat.
    Dui Proin eget tortor risus. Nulla quis lorem ut libero malesuada feugiat.
</p>

Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Nulla quis lorem ut libero malesuada feugiat. Dui Proin eget tortor risus. Nulla quis lorem ut libero malesuada feugiat.



الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements