معنى خاصية not:last-child في css

Mohammed Hhhh · 5 أبريل 2022

السلام عليكم وىحمة الله وبركاته

ما الذي يقوم بفعله الكود الذي تحته اسهم

.header .links ul li:not(:last-child) a{

^^^^^^^^^^^^^^^^

    border-bottom: 1px solid ;

}

:not(:last-child) هذا الكود

تم التعديل في 6 أبريل 2022 بواسطة شرف الدين2
توضيح العنوان

شرف الدين حفني · 5 أبريل 2022

أمر not(:last-child) معناه أن لا يتم تطبيق تلك التنسيقات على أخر عنصر, لنقم بتوضيح الأمر عبر المثال التالي

<p>one.</p>
<p>two.</p>
<p>three.</p>
<p>four.</p>
<style> 
p {
  background: red;
}
</style>

في هذا المثال سيتم تطبيق خاصية background لجميع عناصر p, في حالة أردنا أن يتم تطبيق التنسيقات على العنصر الأخير فقط نقوم بكتابة

<p>one.</p>
<p>two.</p>
<p>three.</p>
<p>four.</p>
<style> 
p:last-child  {
  background: red;
}
</style>

أما في حالة أردنا تطبيق التنسيقات على جميع العناصر بإستثناء العنصر الأخير(كما يحدث في حالتك) نقوم بوضع الselector بداخل not كالتالي

<p>one.</p>
<p>two.</p>
<p>three.</p>
<p>four.</p>
<style> 
p:not(p:last-child) {
  background: red;
}
</style>

هكذا نقوم بإخباره بأن يتم تطبيق تلك التنسيقات على الselector الموجود قبل not ولا يطبقها على الselector بداخل الnot

السؤال