الفرق بين المراجعتين ل"CSS/::selection"

من موسوعة حسوب
< CSS
اذهب إلى التنقل اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
 
سطر 19: سطر 19:
 
== أمثلة ==
 
== أمثلة ==
 
مثال عن استخدام هذا العنصر الزائف لتنسيق النص الذي حدَّده المستخدم:<syntaxhighlight lang="html">
 
مثال عن استخدام هذا العنصر الزائف لتنسيق النص الذي حدَّده المستخدم:<syntaxhighlight lang="html">
<div>This text has special styles when you highlight it.</div>
+
<div>يحتوي هذا النص على أنماط خاصة عند تمييزه</div>
<p>Also try selecting text in this paragraph.</p>
+
<p>حاول أيضًا تحديد النص في هذه الفقرة</p>
  
 
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">

المراجعة الحالية بتاريخ 10:31، 11 أكتوبر 2018

العنصر الزائف ‎::selection‎ في CSS (أي pseudo-element) يُمثِّل نصًّا في المستند الذي حدده المستخدم (باستخدام المؤشر مثلًا).

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

الشكل العام لهذا المحدد:

::selection
::-moz-selection

لا يسمَح إلا باستخدام مجموعة جزئية من خاصيات CSS:

أمثلة

مثال عن استخدام هذا العنصر الزائف لتنسيق النص الذي حدَّده المستخدم:

<div>يحتوي هذا النص على أنماط خاصة عند تمييزه</div>
<p>حاول أيضًا تحديد النص في هذه الفقرة</p>

شيفرة CSS:

::-moz-selection {
  color: gold;
  background: red;
}

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

p::-moz-selection {
  color: white;
  background: blue;
}

p::selection {
  color: white;
  background: blue;
}

دعم المتصفحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 1.0 1.0 (مع السابقة -moz-) 9.0 9.5 1.1

مصادر ومواصفات

لاحظ أنَّ العنصر الزائف ‎::selection‎ كان موجودًا في مسودة CSS Selectors Level 3، لكنه حُذِفَ بعد ذلك عند إصدار المواصفة بسبب بعض المشاكل، لكن العنصر الزائف ‎::selection‎ قد أُعيد تعريفه في مواصفة Pseudo-Elements Level 4.