استهداف عناصر محددة بأسماء الفئات: نهج CSS nth-Child

التحدي: تصميم العناصر بشكل انتقائي بنفس اسم الفئة بناءً على موضعها، بغض النظر عن موقعها في الترميز.

الحل: استخدم nth-child() أو محددات زائفة nth-of-type() لاستهداف العناصر وفقًا لموضعها الترتيبي داخل العنصر الأصلي.

nth-child() Pseudo-Selector

The nth-child(n) يتيح لك المحدد الزائف تصميم عنصر يمثل الطفل رقم n لوالده. على سبيل المثال، لاستهداف العنصر الأول بالفئة "myclass":

.parent_class:nth-child(1) {
  color: #000;
}

لاستهداف العنصرين الثاني والثالث، استخدم المحددات التالية:

.parent_class:nth-child(2) {
  color: #FFF;
}

.parent_class:nth-child(3) {
  color: #006;
}

nth-of-type() Pseudo-Selector

يعمل المحدد الزائف nth-of-type(n) بشكل مشابه لـ nth-child()، ولكنه يحدد العناصر بناءً على نوعهم داخل والديهم. يكون هذا مفيدًا عندما يكون لديك عناصر متعددة من نفس النوع داخل أحد الوالدين:

.myclass:nth-of-type(1) {
  color: #000;
}

.myclass:nth-of-type(2) {
  color: #FFF;
}

.myclass:nth-of-type(3) {
  color: #006;
}

مثال HTML:

  
النص الخاص بي 1
  

  
نصي2
  

  
نصي3