الرئيسية / تقني / خلينا نكمل كلامنا عن الـnth-child Pseudo Class

خلينا نكمل كلامنا عن الـnth-child Pseudo Class



خلينا نكمل كلامنا عن الـnth-child Pseudo Class، ومن الحاجات الجامدة برضه فيه واللي بتطبق الـNotation اللي اتكلمنا عنه البوست اللي فات، هو انك تحدد أول كام عنصر وأخر كام عنصر وهكذا!

احنا قولنا في البداية ان الـn في الـAn+b بترمز لعدد صحيح موجب، Non negative Integer، طيب لو حطينا سالب جمبها؟ خليني أشرحلك

في البوست اللي فات لما بتديها Offset بتكمل من بعده، وساعتها الـn موجب مفيش مشاكل، يبقى ببساطة لو الـn سالب مفيش أي عنصر هيتحدد وده حقيقي، ولكن لما نديها Offset معين، هنا هتبدأ تاخد كل العناصر ما قبل الـOffset ده وبما فيهم الـOffset نفسه

وده ببساطة اللي احنا عاملينه في أول مثال في الصورة، عملنا Style لأول 3 عناصر بس، وحقيقي دي نتيجة مبهرة من خلال Pseudo Class واحد بس، وبدل ما تضطر تكتب الـIndex بتاعتك 3 مرات لكل عنصر، ببساطة هتختصرها في سطر كود واحد بس!

وبالتأكيد لو حابب تعملها على أخر 3 عناصر بس، هتستخدم الـnth-last-child، اللي بتبدأ عد من الأخر، ولكن لما تبقى الـn عدد سالب، هنا مش هتطبق عليها أي Style من بعد الـOffset، وده بالظبط نفس اللي حصل فوق ولكن بشكل عكسي

وبس كدة، لو لسة النقطة دي صعبة عندك هسيبلك لينك في أول كومنت فيه تجربة عملية للكود تقدر تجربه بنفسك وتلعب براحتك، وكالعادة ده الموضوع ببساطة 😄

الجينيص
CSS Notes


الجينيص