فهم محدد CSS :nth-child()

مثل جميع محددات CSS، يمكنك استخدام :nth-child() لتحديد العناصر في صفحة الويب وتطبيق الأنماط عليها. لكن هذا المحدد يتيح لك تضييق نطاق مجموعة من الأشقاء بناءً على موقعهم النسبي.

يدعم المحدد بعض الكلمات الأساسية الأساسية للحالات الشائعة، ولكنه يوفر أيضًا بناء جملة قويًا لمطابقة الأنماط. باستخدامه، يمكنك تحديد العناصر بناءً على أنماط منتظمة ومتكررة أو تعريفات أكثر تعقيدًا، بناءً على احتياجاتك.

بناء جملة المحدد :nth-child()

ك محدد الفئة الزائفة CSS، يختلف بناء الجملة :nth-child() عن المحددات الأخرى. يستغرق الأمر حجة كنموذج لمطابقة العناصر في مجموعة من الأشقاء:

:nth-child(args) {
/*...*/
}

ينصب التركيز الرئيسي على الحجج الموجودة بين قوسين. تحدد هذه الوسائط مجموعة فرعية من العناصر المراد تحديدها.

استخدام قيم الكلمات الرئيسية للحالات الشائعة

يمكن أن يستوعب هذا المحدد قيمتين للكلمات الرئيسية: غريب و حتى. فهي مفيدة بشكل خاص ل تصميم صفوف بديلة في الجدول.

تعد القائمة المرتبة البسيطة مثالًا جيدًا آخر على متى يمكنك استخدام قيم الكلمات الرئيسية هذه:

<ol>
<li>Item 1li>
<li>Item 2li>
<li>Item 3li>
<li>Item 4li>
<li>Item 5li>
<li>Item 6li>
<li>Item 7li>
ol>

باستخدام :الطفل التاسع (غريب) المحدد، يمكنك تغيير لون كل عنصر بديل:

:nth-child(odd) {
color: red;
}

تبدأ العناصر من الفهرس 1، لذا سيظهر العنصر الأول باللون الأحمر، ثم الثالث، وهكذا:

التدوين الوظيفي لمزيد من المرونة

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

li:nth-child(4) {
color: red;
}

في هذه الحالة، يطابق المحدد العنصر الرابع فقط في القائمة:

يعد بناء الجملة هذا حالة خاصة من بناء الجملة الوظيفي الأكثر عمومية والذي يحدد العناصر التي تطابق نمطًا معينًا. بناء الجملة هذا هو:

:nth-child(An+B) {
/*...*/
}

في هذا التدوين، أ هو حجم الخطوة. ويعني هذا عدد المرات التي يتحرك فيها المحدد لتحديد العنصر التالي. فهو يتيح لك تحديد كل عنصر آخر، وكل عنصر ثالث، وما إلى ذلك. ب هي نقطة البداية حيث يبدأ الاختيار.

على سبيل المثال، خذ الوسيطة 3n+1:

li:nth-child(3n+1) {
color: red;
}

سيبدأ هذا التحديد عند العنصر الأول ويستمر مع كل عنصر ثالث بعد ذلك:

قارن ذلك بالتعبير 3n+2:

li:nth-child(3n+2) {
color:red;
}

لا يزال هذا يحدد كل عنصر ثالث، ولكنه يبدأ الآن من العنصر الثاني في القائمة:

مثال آخر مثير للاهتمام هو :nth-child (n+3):

li:nth-child(n+3) {
color: red;
}

هذا العنصر سيحدد كل عنصر (ن)، بدءًا من العنصر الثالث (+3). سوف يبدو مثل هذا:

يمكنك أيضًا استخدام الطرح لتحقيق نتائج معينة:

li:nth-child(3n-1) {
color: red;
}

لا يزال هذا المثال يختار كل عنصر ثالث، ولكنه يبدأ من "الطرح أولاً". في الواقع، هذا يعني أنه سيختار العنصر الثاني في القائمة، ثم الخامس، وهكذا:

من بناء الجملة

يمكنك أيضًا استخدام الكلمة الأساسية ل متبوعة ب محدد كوسيطة في محدد :nth-child(). يتيح لك بناء الجملة هذا تضييق نطاق العناصر المحتملة التي يختار منها النمط العادي.

على سبيل المثال، تخيل أن الترميز الخاص بك أكثر تعقيدًا من النص الأصلي:

<ol>
<liclass="old">Item 1li>
<liclass="new">Item 2li>
<liclass="new">Item 3li>
<liclass="old">Item 4li>
<liclass="new">Item 5li>
<liclass="new">Item 6li>
<liclass="new">Item 7li>
ol>

الآن، استخدم :nth-child لتحديد العناصر الزوجية من مجموعة العناصر ذات فئة معينة:

.new {
font-weight: bold;
}
li:nth-child(evenof.new) {
color: red;
}

لاحظ كيف أن العناصر ذات الأرقام الزوجية الغامقة فقط هي التي تكون باللون الأحمر:

ضع في اعتبارك أيضًا كيف يختلف هذا عن li.new: الطفل n (حتى) الذي يستهدف العناصر الجديدة، ولكن فقط إذا كانت متساوية. سيكون هذا هو العنصرين 2 و 6 في المثال أعلاه.

العمل مع محدد :nth-child()

يمكنك تحقيق تصميمات فريدة باستخدام محدد :nth-child(). يمكنك إنشاء مواقع ويب ملونة وتمييز الصفوف والأعمدة في جداول البيانات. سيساعدك دمجها مع محددات CSS الأخرى على إنشاء تخطيطات وتصميمات معقدة.