الفرق بين المراجعتين ل"CSS/:last-child"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
سطر 17: | سطر 17: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<div> | <div> | ||
− | <p> | + | <p>هذا النص محدد</p> |
− | <p> | + | <p>هذا النص غير محدد</p> |
</div> | </div> | ||
<div> | <div> | ||
− | <p | + | <h2>هذا النص غير محدد إنه عنصر `p`.</h2> |
− | < | + | <p>هذا النص غير محدد</p> |
</div> | </div> | ||
− | |||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
p:last-child { | p:last-child { | ||
سطر 34: | سطر 33: | ||
</syntaxhighlight>مثال عن تحديد آخر عنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code> ضمن قائمة غير مرتبة <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code>:<syntaxhighlight lang="html"> | </syntaxhighlight>مثال عن تحديد آخر عنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code> ضمن قائمة غير مرتبة <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code>:<syntaxhighlight lang="html"> | ||
<ul> | <ul> | ||
− | <li> | + | <li>العنصر 1</li> |
− | <li> | + | <li>العنصر 2</li> |
− | <li> | + | <li>العنصر 3 |
<ul> | <ul> | ||
− | <li> | + | <li>العنصر 3.1</li> |
− | <li> | + | <li>العنصر 3.2</li> |
− | <li> | + | <li>العنصر 3.3</li> |
</ul> | </ul> | ||
</li> | </li> |
مراجعة 16:09، 3 أكتوبر 2018
الصنف الزائف :last-child
في CSS (أي pseudo-class) يُمثِّل آخر عنصر في مجموعة من العناصر الأخوة (sibling elements).
المُحدِّد الآتي سيُحدِّد آخر عنصر <p>
من بين أخوته:
p:last-child {
color: lime;
}
ملاحظة: عندما عُرِّف هذا الصنف كان من الضروري أن يملك العنصر أبًا، لكن بدءًا من مواصفة Selectors Level 4 لم يعد ذلك ضروريًا. الشكل العام لهذا المحدد:
:last-child
أمثلة
لاحظ كيف سيُحدَّد آخر عنصر <p>
من بين العناصر الأخوة له:
<div>
<p>هذا النص محدد</p>
<p>هذا النص غير محدد</p>
</div>
<div>
<h2>هذا النص غير محدد إنه عنصر `p`.</h2>
<p>هذا النص غير محدد</p>
</div>
شيفرة CSS:
p:last-child {
color: lime;
background-color: black;
padding: 5px;
}
مثال عن تحديد آخر عنصر <li>
ضمن قائمة غير مرتبة <ul>
:
<ul>
<li>العنصر 1</li>
<li>العنصر 2</li>
<li>العنصر 3
<ul>
<li>العنصر 3.1</li>
<li>العنصر 3.2</li>
<li>العنصر 3.3</li>
</ul>
</li>
</ul>
شيفرة CSS:
ul li {
color: blue;
}
ul li:last-child {
border: 1px solid red;
color: red;
}
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي | 1.0 | 1.0 | 9.0 | 9.5 | 3.2 |
عدم الحاجة إلى وجود عنصر أب | 57 | 51 | ؟ | 44 | ؟ |
مصادر ومواصفات
- مسودة Selectors Level 4.
- مواصفة Selectors Level 3.