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

المراجعة الحالية بتاريخ 14:20، 24 أكتوبر 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

انظر أيضًا

صفحة الصنف الزائف first-child: الذي يُمثِّل أوّل عنصر في مجموعة من العناصر الأخوة (sibling elements).
صفحة الصنف الزائف last-child: الذي يُمثِّل آخر عنصر في مجموعة من العناصر الأخوة (sibling elements).
صفحة الصنف الزائف nth-child: الذي يُطابِق عنصرًا أو أكثر بناءً على موقعه ضمن مجموعة من العناصر الأخوة (siblings).

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

مسودة Selectors Level 4.
مواصفة Selectors Level 3.

@@ سطر 13: / سطر 13: @@
 لاحظ كيف ستُنسَّق آخر فقرة <code>[[HTML/p|<nowiki><p></nowiki>]]</code> من بين العناصر الأخوة:
 <syntaxhighlight lang="html">
-<h2>Heading</h2>
+<h2>الترويسة</h2>
-<p>Paragraph 1</p>
+<p>النص 1</p>
-<p>Paragraph 2</p>
+<p>النص 2</p>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 p:last-of-type {
@@ سطر 23: / سطر 23: @@
 </syntaxhighlight>لاحظ كيف يمكن استخدام هذا المُحدِّد على العناصر المتشعبة، تذكَّر أنَّ [[CSS/Universal Selector|المُحدِّد العام]] <code>*</code> سيُستخدَم ضمنيًا عند عدم التصريح عن مُحدِّد:<syntaxhighlight lang="html">
 <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>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
@@ سطر 50: / سطر 51: @@
 |3.2
 |}
+==انظر أيضًا==
+*صفحة الصنف الزائف <code>[[CSS/:first-child|first-child:]]</code> الذي يُمثِّل أوّل عنصر في مجموعة من العناصر الأخوة (sibling elements).
+*صفحة الصنف الزائف <code>[[CSS/:last-child|last-child:]]</code> الذي يُمثِّل آخر عنصر في مجموعة من العناصر الأخوة (sibling elements).
+*صفحة الصنف الزائف <code>[[CSS/:nth-child|nth-child:]]</code> الذي يُطابِق عنصرًا أو أكثر بناءً على موقعه ضمن مجموعة من العناصر الأخوة (siblings).
 ==مصادر ومواصفات==
 *مسودة [https://drafts.csswg.org/selectors-4/#last-of-type-pseudo Selectors Level 4].