الفرق بين المراجعتين ل"CSS/:last-of-type"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
سطر 13: | سطر 13: | ||
لاحظ كيف ستُنسَّق آخر فقرة <code>[[HTML/p|<nowiki><p></nowiki>]]</code> من بين العناصر الأخوة: | لاحظ كيف ستُنسَّق آخر فقرة <code>[[HTML/p|<nowiki><p></nowiki>]]</code> من بين العناصر الأخوة: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
− | <h2> | + | <h2>الترويسة</h2> |
− | <p> | + | <p>النص 1</p> |
− | <p> | + | <p>النص 2</p> |
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
p:last-of-type { | p:last-of-type { |
مراجعة 16:12، 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>This `div` is first.</div>
<div>This <span>nested `span` is last</span>!</div>
<div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
<b>This `b` qualifies!</b>
<div>This is the final `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 |
مصادر ومواصفات
- مسودة Selectors Level 4.
- مواصفة Selectors Level 3.