الفرق بين المراجعتين ل"CSS/:last-of-type"

من موسوعة حسوب
< CSS
اذهب إلى التنقل اذهب إلى البحث
سطر 23: سطر 23:
 
</syntaxhighlight>لاحظ كيف يمكن استخدام هذا المُحدِّد على العناصر المتشعبة، تذكَّر أنَّ [[CSS/Universal Selector|المُحدِّد العام]] <code>*</code> سيُستخدَم ضمنيًا عند عدم التصريح عن مُحدِّد:<syntaxhighlight lang="html">
 
</syntaxhighlight>لاحظ كيف يمكن استخدام هذا المُحدِّد على العناصر المتشعبة، تذكَّر أنَّ [[CSS/Universal Selector|المُحدِّد العام]] <code>*</code> سيُستخدَم ضمنيًا عند عدم التصريح عن مُحدِّد:<syntaxhighlight lang="html">
 
<article>
 
<article>
   <div>This `div` is first.</div>
+
   <div>هذا عنصر `div` الأول</div>
   <div>This <span>nested `span` is last</span>!</div>
+
   <div>هذا <span>المتداخل`span` هو  الأول</span>!</div>
   <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
+
   <div>هذا <em>المتداخل`em` هو الأول</em>, لكن هذا <em>المتداخل`em` هو الأخير</em>!</div>
   <b>This `b` qualifies!</b>
+
  <div>هذا <span>المتداخل`span` له تصميم</span>!</div>
   <div>This is the final `div`!</div>
+
   <b>هذا `b` مؤهل</b>
 +
   <div>هذا آخر عنصر `div`.</div>
 
</article>
 
</article>
 
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">

مراجعة 16:13، 3 أكتوبر 2018

الصنف الزائف ‎:last-of-type في CSS (أي pseudo-class) يُمثِّل آخر عنصر من نوعه في مجموعة من العناصر الأخوة.

p:last-of-type {
  color: lime;
}

ملاحظة: عندما عُرِّف هذا الصنف كان من الضروري أن يملك العنصر أبًا، لكن بدءًا من مواصفة Selectors Level 4 لم يعد ذلك ضروريًا. الشكل العام لهذا المحدد:

:last-of-type

أمثلة

لاحظ كيف ستُنسَّق آخر فقرة <p> من بين العناصر الأخوة:

<h2>الترويسة</h2>
<p>النص 1</p>
<p>النص 2</p>

شيفرة CSS:

p:last-of-type {
  color: red;
  font-style: italic;
}

لاحظ كيف يمكن استخدام هذا المُحدِّد على العناصر المتشعبة، تذكَّر أنَّ المُحدِّد العام * سيُستخدَم ضمنيًا عند عدم التصريح عن مُحدِّد:

<article>
  <div>هذا عنصر `div` الأول</div>
  <div>هذا <span>المتداخل`span` هو  الأول</span>!</div>
  <div>هذا <em>المتداخل`em` هو الأول</em>, لكن هذا <em>المتداخل`em` هو الأخير</em>!</div>
  <div>هذا <span>المتداخل`span` له تصميم</span>!</div>
  <b>هذا `b` مؤهل</b>
  <div>هذا آخر عنصر `div`.</div>
</article>

شيفرة CSS:

article :last-of-type {
  background-color: pink;
}

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

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 1.0 3.5 9.0 9.5 3.2

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