CSS Pseudo-elements

-

تستخدم هذه الخاصية لتطبيق style على جزء من element ، من الأمثلة على ذلك :

  • تطبيق style على first letter، line من element 
  • إضافة محتوي قبل او بعد محتوى معين

طريقة الكتابة.

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

قيمة pseudo-class  هنا مختلفة حسب الحاجة، يعني مثلا لو كان المطلوب إضافة Style الى اول سطر بنستخدم  ::first-line

مثال :

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

في هذا المثال يتم تطبيق الخصائص المطلوبة على اول سطر في <p> 

نطبق هذا المثال في صفحة HTML بالكود التالي :


<!DOCTYPE html>
<html>
<head>
<style>
    p{
     font-family: Arial, Helvetica, sans-serif;
     font-size: la;
    }
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
</style>
</head>
<body>
<p>  كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.
       كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.
      كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
</body>
</html>

شغل الصفحة وشوف النتيجة (الصورة)

تم تطبيق اللون الأحمر على السطر الأول فقط.

لاحظ انه تم استخدام الامر first-line:: بدل من first-line: ما الفرق 

تستخدم single-colon مع pseudo-classes و pseudo-elements في CSS2 and CSS1
في CSS3 يتم استبدال double colon ب single-colon في pseudo-elements
الهدف من كتابة double colon هي محاولة من W3C للتميز بين pseudo-classes و pseudo-elements

تمام نشوف كيف ممكن نستخدم pseudo-elements مع الاحرف الأولى للنصوص 
لتطبيق ذلك على الاحرف الأولى بنستخدم الامر :
::first-letter
مثال 

<!DOCTYPE html>
<html>
<head>
<style>
    p{
     font-family: Arial, Helvetica, sans-serif;
     font-size: large;
    }
    p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
</style>
</head>
<body>
<p>  كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.
       كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.
      كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
</body>
</html>
شغل الصفحة وشوف النتيجة (اكيد بتكون النتيجة الحرف الأول مختلف)


في المثال التالي بنطبق هذا الامر على CSS class لتغيير الحرف الأول ل element الي بنطبق عليه هذا class 

<!DOCTYPE html>
<html>
<head>
<style>
    p{
     font-family: Arial, Helvetica, sans-serif;
     font-size: large;
    }
    p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
} 
</style>
</head>
<body>
<p class="intro">  كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.
       كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.
      كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
</body>
</html>
إضافة محتوي قبل وبعد النصوص 
يمكن إضافة محتوى قبل او بعد النصوص باستخدام : 
إضافة محتوي قبل :
 ::before
إضافة محتوي بعد : 
::after    
تمام نطبق هذا الكلام بمثال : 

اعمل صفحة html وبعدها ضيف الكود التالي :

<!DOCTYPE html>
<html>
<head>
<style>
    p{
     font-family: Arial, Helvetica, sans-serif;
     font-size: large;
    }
    p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
   } 
p::before
{
content: url(Before.png);
}
p::after
{
content: url(After.png);
}
</style>
</head>
<body>
<p class="intro">  كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.
       كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.
      كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
</body>
</html>
شغل الصفحة وشوف النتيجة:

تم إضافة صورة قبل وبعد النص 

استخدام Pseudo-element (marker::)  
يستخدم هذ الامر مع list item 

مثال 

<!DOCTYPE html>
<html>
<head>
<style>
::marker { 
  color: red;
  font-size: 23px;
}
</style>
</head>
<body>
<ul>
  <li>BMW</li>
  <li>Mercedes</li>
  <li>jaguar </li>
</ul>
<ol>
  <li>BMW</li>
  <li>Mercedes</li>
  <li>jaguar </li>
</ol>
</body>

شغل الصفحة وشوف النتيجة:

استخدام Pseudo-element (selection ::)  
يستخدم هذه الامر لتطبيق الخصائص المطلوبة على أي جزء من الصفحة يتم اختياره من قبل المستخدم
يمكن تطبيق الخصائص التالية هنا 
Color، background، cursor، outline 
مثال : 

<!DOCTYPE html>
<html>
<head>
<style>
::selection {
  color: red;
  background: rgb(19, 19, 18);
  cursor:all-scroll;
}
</style>
</head>
<body>
<div> 
كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.
</div>
</body>
</html>
النتيجة بعد اختيار جزء من النص