كل عنصر css ثالث. فئات CSS الزائفة: nth-child و nth-of-type. المعنى والتطبيق
تُستخدم فئة: nth-child الزائفة لتصميم العناصر بناءً على الترقيم في شجرة العناصر.
التعيينات
| وصف | مثال | |
|---|---|---|
| <тип> | يشير إلى نوع القيمة. | <размер> |
| أ && ب | يجب عرض القيم بالترتيب الموضح. | <размер> && <цвет> |
| أ | ب | يشير إلى أنه يجب تحديد قيمة واحدة فقط من القيم المقترحة (أ أو ب). | عادي | أحرف صغيرة |
| أ || ب | يمكن استخدام كل قيمة بمفردها أو بالاشتراك مع قيم أخرى بأي ترتيب. | العرض || عدد |
| قيم المجموعات. | [اقتصاص || تعبر] | |
| * | كرر صفر مرة أو أكثر. | [,<время>]* |
| + | كرر مرة واحدة أو أكثر. | <число>+ |
| ? | النوع أو الكلمة أو المجموعة المحددة اختيارية. | أقحم؟ |
| (أ ، ب) | كرر ما لا يقل عن A ، ولكن ليس أكثر من B مرة. | <радиус>{1,4} |
| # | كرر مرة واحدة أو أكثر ، مفصولة بفواصل. | <время># |
القيم
فردي جميع أرقام العناصر الفردية. حتى جميع أرقام العناصر الزوجية.<число>الرقم الترتيبي للطفل بالنسبة لوالديه. يبدأ الترقيم من 1 ، وسيكون هذا هو العنصر الأول في القائمة.<выражение>يتم تحديده على أنه ± b ، حيث a و b عدد صحيح ، و n هو عداد يأخذ تلقائيًا القيمة 0 ، 1 ، 2 ...
إذا كانت a تساوي صفرًا ، فلن تتم كتابتها ويتم اختصار السجل إلى b. إذا كانت b تساوي صفرًا ، فإنها أيضًا غير محددة ويتم كتابة التعبير بالصيغة an. يمكن أن تكون a و b أرقامًا سالبة ، وفي هذه الحالة تتغير علامة الجمع إلى سالب ، على سبيل المثال: 5n-1.
باستخدام القيم السالبة لـ a و b ، يمكن أيضًا أن تكون بعض النتائج سالبة أو صفرية. ومع ذلك ، لا تتأثر العناصر إلا بالقيم الموجبة نظرًا لأن ترقيم العناصر يبدأ من 1.
طاولة يسرد 1 بعض التعبيرات والكلمات الأساسية المحتملة ، ويشير أيضًا إلى أرقام العناصر التي سيتم استخدامها.
| المعنى | أرقام العناصر | وصف |
|---|---|---|
| 1 | 1 | العنصر الأول مرادف لـ: الاسم المستعار للطفل الأول. |
| 5 | 5 | العنصر الخامس. |
| 2 ن | 2, 4, 6, 8, 10,… | جميع العناصر حتى التناظرية للقيمة حتى. |
| 2n + 1 | 1, 3, 5, 7, 9,… | جميع العناصر الفردية التناظرية للقيمة الفردية. |
| 3n | 3, 6, 9, 12, 15,… | كل عنصر ثالث. |
| 3n + 2 | 2, 5, 8, 11, 14,… | كل عنصر ثالث ابتداء من الثاني. |
| ن + 4 | 4, 5, 6, 7, 8,… | كل العناصر ما عدا الثلاثة الأولى. |
| -n + 3 | 3, 2, 1 | العناصر الثلاثة الأولى. |
| 5n-2 | 3, 8, 13, 18, 23,… | — |
| حتى في | 2, 4, 6, 8, 10,… | كل العناصر حتى. |
| الفردية | 1, 3, 5, 7, 9,… | كل العناصر الفردية. |
يُسمح بدمج فئتين زائفتين: nth-child لتحديد مجموعة من العناصر. سيتم تحديد جميع العناصر من 2 إلى 5 هنا.
: nth-child (n + 2): nth-child (-n + 5) (...)
مثال
| 2134 | 2135 | 2136 | 2137 | 2138 | |
| بترول | 16 | 34 | 62 | 74 | 57 |
| ذهب | 4 | 69 | 72 | 56 | 47 |
| خشب | 7 | 73 | 79 | 34 | 86 |
| الحجارة | 23 | 34 | 88 | 53 | 103 |
الخامس هذا المثالتُستخدم الفئة الزائفة: nth-child لتغيير نمط الصف الأول من الجدول ، وكذلك لتلوين جميع الصفوف ذات الأرقام الزوجية (الشكل 1).
أرز. 1. تطبيق الفئة الزائفة: nth-child على صفوف الجدول
تخصيص
تمر كل مواصفة بعدة مراحل من الموافقة.
- توصية - تمت الموافقة على هذه المواصفات من قبل W3C ويوصى بها كمعيار.
- توصية المرشح ( توصية ممكنة) - اقتنعت المجموعة المسؤولة عن المعيار بأنه يلبي أهدافها ، لكن مساعدة مجتمع المطورين مطلوبة لتنفيذ المعيار.
- التوصية المقترحة ( التوصية المقترحة) - في هذه المرحلة ، يتم تقديم الوثيقة إلى المجلس الاستشاري W3C للموافقة النهائية.
- مسودة العمل - نسخة أكثر نضجًا من المسودة بعد المناقشة والمراجعة لمراجعة المجتمع.
- مسودة المحرر ( مسودة تحريرية) - نسخة مسودة للمعيار بعد تحريرها من قبل محرري المشروع.
- مشروع ( مواصفات المسودة) هي المسودة الأولى للمعيار.
يمكن استخدام الفئات الزائفة لتحديد عنصر معين من القائمة. في هذا البرنامج التعليمي ، سنتحدث عن: فئة الأطفال الزائفة ، وما يمكنك إنشاؤه باستخدام هذه الفئة الزائفة وكيف يمكن أن تكون مفيدة. تسمح لك الفئة الزائفة nth-child بتحديد مجموعة من العناصر ذات الخصائص المشتركة. يتم استخدامه بشكل شائع لتحديد العناصر الفردية أو الزوجية من مجموعة. غالبًا ما يتم استخدامه لجعل الجدول يبدو وكأنه حمار وحشي عن طريق تعيين ألوان خلفية مختلفة للصفوف الفردية والزوجية.
فئة زائفة أخرى: nth-child يسمح لك بتقسيم العناصر ذات خاصية مشتركة إلى مجموعات ثم تحديد عنصر معين من كل مجموعة باستخدام الصيغة التالية:
هنا أيحدد عدد العناصر في المجموعة ، و بيحدد العنصر الذي سيتم اختياره من المجموعة.
ما إذا كان سيتم استخدام القيمة 2n + 1، ثم سيتم تقسيم العناصر إلى مجموعات من مجموعتين ، وسيتم تحديد العناصر الأولى من كل مجموعة ، أي العناصر ذات العدد الترتيبي الفردي. إذا استخدمنا القيمة 2n + 2، ثم سيتم تقسيم العناصر مرة أخرى إلى مجموعات من مجموعتين ، ولكن سيتم الآن تحديد العناصر الثانية من كل مجموعة ، أي العناصر ذات العدد الترتيبي الزوجي.
كمثال ، لفهم: الفئة الزائفة nth-child ، نستخدمها لتحديد كل عنصر رابع ، أي الرابع ، الثامن ، الثاني عشر ، السادس عشر ، إلخ. للقيام بذلك ، قسّم العناصر إلى مجموعات من أربعة و ثم حدد كل عنصر رابع.
فيما يلي قائمة بعشرة عناصر ، وسنستخدم: nth-child و: first-child و: last-child pseudo-classes لتحديد العناصر التي نريد تمييزها.
استخدام CSS pseudo-class: nth-child لتحديد عنصر واحد
من خلال تعيين: nth-child pseudo class إلى رقم ، يمكنك اختيار أي طفل من المجموعة للإشارة إليه:
العنصر 1
العنصر 2
العنصر 3
العنصر 4
العنصر 5
العنصر 6
العنصر 7
العنصر 8
العنصر 9
العنصر 10
استخدام فئة CSS الزائفة: nth-child لتحديد الكل ما عدا العناصر الخمسة الأولى
إذا قمت بتعيين الفئة الزائفة: nth-child إلى قيمة النموذج ن + number ، يمكنك تحديد جميع العناصر بدءًا من العنصر بهذا الرقم الترتيبي:
العنصر 1
العنصر 2
العنصر 3
العنصر 4
العنصر 5
العنصر 6
العنصر 7
العنصر 8
العنصر 9
العنصر 10
استخدام فئة CSS الزائفة: nth-child لتحديد العناصر الخمسة الأولى فقط
عندما نضع الفئة الزائفة: الطفل التاسع إلى سلبي ن + number ، نختار جميع العناصر الموجودة قبل العنصر بهذا الترتيب الترتيبي:
العنصر 1
العنصر 2
العنصر 3
العنصر 4
العنصر 5
العنصر 6
العنصر 7
العنصر 8
العنصر 9
العنصر 10
استخدام CSS pseudo-class: nth-child لتحديد كل عنصر ثالث
يمكن استخدام الفئة الزائفة: nth-child لتحديد سلسلة من العناصر عن طريق تحديد عدد العناصر في التسلسل ورقم التسلسل للعنصر المطلوب. إذا قمت بتعيين القيمة 3n + 1، سيتم تحديد كل عنصر ثالث ، بدءًا من العنصر الأول:
العنصر 1
العنصر 2
العنصر 3
العنصر 4
العنصر 5
العنصر 6
العنصر 7
العنصر 8
العنصر 9
العنصر 10
استخدام فئة CSS الزائفة: nth-child لتحديد العناصر الفردية فقط
يمكنك تعيين: nth-child pseudo class إلى فردي (فردي) لتحديد كل العناصر ذات الأرقام الفردية. هذا هو ، الأول ، الثالث ، الخامس ، السابع ، التاسع ، إلخ. من المريح جدًا تعيين الألوان للصفوف المجاورة للجدول.
العنصر 1
العنصر 2
العنصر 3
العنصر 4
العنصر 5
العنصر 6
العنصر 7
العنصر 8
العنصر 9
العنصر 10
استخدام فئة css الزائفة: nth-child لتحديد العناصر الزوجية فقط
يوضح هذا المثال نفس المثال الأخير ، ولكن هذه المرة يتم تحديد جميع العناصر ذات الأرقام المتسلسلة الزوجية. أي العناصر الثانية والرابعة والسادسة والثامنة والعاشرة وما إلى ذلك:
العنصر 1
العنصر 2
العنصر 3
العنصر 4
العنصر 5
العنصر 6
العنصر 7
العنصر 8
العنصر 9
العنصر 10
استخدام فئة CSS الزائفة: أول طفل لتحديد العنصر الأول
فئة زائفة أخرى: سيختار الطفل الأول العنصر الأول:
العنصر 1
العنصر 2
العنصر 3
العنصر 4
العنصر 5
العنصر 6
العنصر 7
العنصر 8
العنصر 9
العنصر 10
استخدام CSS pseudo-class: last-child لتحديد العنصر الأخير
بالإضافة إلى الفئة الزائفة للطفل الأول ، هناك الفئة الزائفة للطفل الأخير ، والتي ستحدد العنصر الأخير من مجموعة العناصر:
العنصر 1
العنصر 2
العنصر 3
العنصر 4
العنصر 5
العنصر 6
العنصر 7
العنصر 8
العنصر 9
العنصر 10
استخدام فئة CSS الزائفة: nth-last-child لتحديد العنصر قبل الأخير
يمكنك أيضًا استخدام الفئة الزائفة: nth-last-child ، والتي تجمع بين إمكانيات الفئتين الزائفة: last-child و: nth-child لبدء العد من النهاية. بمعنى ، يمكنك تحديد عنصر عن طريق حساب الأرقام الترتيبية من نهاية المجموعة ، على سبيل المثال ، في مجموعة من عشرة عناصر ، يمكنك تحديد العنصر الثاني من النهاية:
العنصر 1
العنصر 2
العنصر 3
العنصر 4
العنصر 5
العنصر 6
العنصر 7
العنصر 8
العنصر 9
العنصر 10
تحقق من قدرات: nth-child pseudo class باستخدام "nth-child Constructor".
في بعض الأحيان ، عند تصميم الصفحات ، قد ترغب في "أتمتة" أنماط CSS قليلاً.
إحدى المشكلات التي يمكنك مواجهتها: كيفية تحديد كل العناصر الزوجية لقائمة وجدول وحظر وعناصر أخرى على صفحة ويب.
يمكنك بالطبع تعيين فئة معينة لكل عنصر زوجي ، ولكن هذا أمر جيد عندما لا يكون هناك الكثير من العناصر. إن إضافة كل هذا يدويًا ليس دائمًا ممكنًا وغير مرغوب فيه دائمًا.
أود أن أتحدث عن طريقة تقوم على استخدام فئة زائفة nth-child.
ظهرت هذه الفئة الزائفة في CSS3 ، لذا ضع في اعتبارك أن هذا قد لا يعمل في المتصفحات القديمة. لكن الفرص التي تظهر عند استخدامه رائعة للغاية.
تتمثل إحدى طرق استخدام هذه الفئة الزائفة عمليًا في تحديد جميع العناصر ذات الأرقام الزوجية الموجودة في شجرة مستندات HTML.
هناك عدة خيارات لكيفية تنفيذ ذلك. دعونا نلقي نظرة عليهم.
الخيار 1. استخدم المعلمة حتى.
افترض أن لدينا قائمة مثل هذه:
- العنصر 1
- العنصر 2
- العنصر 3
- العنصر 4
- العنصر 5
- العنصر 6
- العنصر 7
- العنصر 8
- العنصر 9
- العنصر 10
لتمييز جميع العناصر الزوجية في هذه القائمة باللون الأحمر ، تحتاج إلى إضافة نمط CSS:
Ul li: nth-child (حتى) (اللون: # F00 ؛)
نتيجة لذلك ، ستظهر الصورة التالية.
حتى هي كلمة أساسية مما يعني أنه سيتم تحديد العناصر حتى.
حل جيد ، أليس كذلك؟ سطر واحد فقط من أنماط CSS.
الخيار 2. استخدم المعلمة 2n.
يمكن استخدام هذا الخيار كبديل. تعني القيمة 2n أنه سيتم تحديد كل عنصر ثانٍ ، وكل عنصر ثانٍ بشكل أساسي زوجي.
هذه هي الطريقة التي يمكن استخدامها في الجداول.
| العمود 1 | العمود 2 &. ر ؛ تد> 6 |
| 7 | 7 |
| 8 | 8 |
| 9 | 9 |
وأنماط CSS
Tr: nth-child (2n) (اللون: # F00 ؛)
تحول النص في كل عنصر tr إلى اللون الأحمر.
webgyry.info
دعم المتصفح
| 12.0+ | 9.0+ | 3.5+ | 4.0+ | 9.6+ | 3.2+ |
وصف
تحدد الفئة: nth-child () pseudo class العناصر الفرعية بناءً على موقعها (الترتيبي) داخل العنصر الأصل.
بناء الجملة
: nth-child (number) (خصائص)تتم الإشارة إلى الوسيطة بين أقواس ، والتي يمكن أن تكون رقمًا أو كلمة رئيسية أو تعبيرًا رقميًا في الشكل a + b ، حيث a و b أعداد صحيحة ، و n عداد يقبل تلقائيًا القيم الصحيحة غير السالبة من 0 وأكثر: 0 ، 1 ، 2 ، 3 ،….
باستخدام رقم ، يمكنك تحديد ترتيبي معين للعنصر الفرعي الذي تريد تطبيق النمط عليه:
/ * حدد العنصر الثالث في القائمة * / ul li: nth-child (3) (اللون: أحمر ؛)
هناك نوعان ممكنان الكلمات الدالة: فردي (فردي) وزوجي (زوجي). أنها تسمح لك بتحديد الأطفال الزوجي أو الفردي:
/ * حدد جميع الصفوف في الجدول برقم تسلسل فردي * / tr: nth-child (فردي) td (لون الخلفية: فضي ؛)
يحسب الجزء "an" من التعبير مواضع العناصر الفرعية وفقًا للصيغة التالية: رقم * n ، نظرًا لأن n عبارة عن عداد ، يتم استبدال القيم الرقمية تلقائيًا به أثناء الحساب ، بدءًا من 0 ثم تزداد القيمة في كل مرة بمقدار واحد أكثر من القيمة السابقة: 0،1،2 ، 3 ، إلخ. لنفترض أننا بحاجة إلى تحديد كل عنصر ثالث في القائمة ، لذلك نحتاج إلى كتابة 3n فقط:
ul li: nth-child (3n) (اللون: أحمر ؛)
3 * 0 = 0 - لم يتم تحديد أي شيء
3 * 1 = النقطة الثالثة
3 * 2 = النقطة السادسة
إلخ.
يسمح لك الجزء "b" من التعبير بتحديد المكان الذي يجب أن يبدأ منه اختيار العناصر. لنفترض أننا بحاجة إلى تحديد كل عنصر ثالث في القائمة بدءًا من العنصر الثاني في القائمة ، لذلك نحتاج إلى كتابته التعبير التالي 3n + 2:
Ul li: nth-child (3n + 2) (اللون: أحمر ؛)
وبالتالي ، سيتم اختيار عناصر القائمة وفقًا للصيغة التالية:
(3 * 0) + 2 = النقطة الثانية
(3 * 1) + 2 = النقطة الخامسة
(3 * 2) + 2 = النقطة الثامنة
إلخ.
مثال:
| نص |
| نص |
| نص |
| نص |
| نص |
| نص |
| نص |
| نص |
| نص |
| نص |
نتيجة هذا المثال:
puzzleweb.ru
دعم المتصفح
المحدد: nth-child
هو أحد محددات CSS القليلة المدعومة بالكامل تقريبًا في المتصفحات الحديثة وغير مدعومة تمامًا في IE ، ولا حتى IE8. لذلك ، عندما يتعلق الأمر باستخدامه ، يتم إجراء النتيجة النهائية وفقًا لتقنية التحسين التدريجي - يمكنك استخدامه بأمان لبعض عناصر التصميم ، مثل صفوف جدول التلوين. ومع ذلك ، يجب ألا تستخدمه في الحالات الأكثر خطورة. على سبيل المثال ، يمكنك الاعتماد عليها في تخطيط موقعك ، أو إزالة الهامش الأيمن من كل كتلة ثالثة في شبكة من ثلاثة إلى ثلاثة بحيث تناسب صفًا واحدًا.
الخلاص هنا هو مكتبة jQuery ، التي تنفذ الدعم لجميع محددات CSS ، بما في ذلك: nth-child ، حتى في Internet Explorer.
web-standards.ru
المعنى والتطبيق
فئة زائفة : nth-child ()يسمح لك بتحديد العناصر الفرعية داخل العنصر الأصل بناءً على موضعها (ترتيبي).
ينتشر استخدام هذه الفئة الزائفة على نطاق واسع ، فهي تتيح لك تبديل أنماط الصفوف في الجداول والقوائم ونمط مجموعة من الأطفال وما إلى ذلك.
بناء جملة CSS:
: nth-child (رقم | كلمة رئيسية | صيغة)(كتلة إعلانية ؛)مثال على الاستخدام
التصميم حسب الرقم التسلسلي
لنلقِ نظرة على مثال تواجه فيه مهمة تغيير النمط لجميع العناصر التي تم تمييزها باللون البرتقالي في الصورة:
ما هو القاسم المشترك بين العناصر المميزة في الصورة؟ القاسم المشترك بينهم هو أنها مظللة باللون البرتقالي. مضحك؟ لا اعتقد. لا يزال لديهم شيء مشترك ، العناصر
يمكن أيضًا احتسابه ، وسيكون ترتيبه هو الثالث (الطفل الثالث لوالده ). لتصميم هذه العناصر ، نحتاج إلى استخدام الفئة الزائفة : nth-child.
دعنا ننتقل إلى مثال:
أول عنوان h2 من علامة الجسم
- واحد
- اثنين
- ثلاثة
العنوان الثاني h2 من علامة الجسم
أول عنوان h2 لعلامة المقالة
- واحد
- اثنين
- ثلاثة
: nth-childصممنا العناصر
و
نتيجة مثالنا:
تصميم الكلمات الرئيسية
كقيمة زائفة : nth-child ()لا يمكن أن يكون هناك فقط العدد الترتيبي للعناصر الفرعية التي تحتاج إلى تصميم ، ولكن أيضًا الكلمات الرئيسية التي يمكن أن تحدد مجموعة كاملة من العناصر. يمكنك استخدام قيمتين ككلمة رئيسية:
- حتى (حتى العناصر)
- عناصر فردية
تعد عناصر التصميم باستخدام الكلمات الرئيسية شديدة التنوع لأنه يمكنك بسهولة تحديد وتنسيق الأطفال الفرديين أو حتى الأطفال في المستند الخاص بك.
على سبيل المثال ، دعنا ننشئ جدولين بسيطين بفئات أنماط مختلفة ونرى بوضوح الاختلاف في تطبيق قيم الكلمات الرئيسية ذات الفئة الزائفة. : nth-childلعنصر HTML
| 1 سطر | موقع | كمية |
|---|---|---|
| 2 سطر | ||
| 3 سطر | ||
| 4 سطر | ||
| 5 سطر |
| 1 سطر | موقع | كمية |
|---|---|---|
| 2 سطر | ||
| 3 سطر | ||
| 4 سطر | ||
| 5 سطر |
في هذا المثال باستخدام الفئة الزائفة : nth-child ()نحن نصمم حتى فيصفوف الجدول الأول (العناصر
التصميم مع صيغة حسابية بسيطة
فئة زائفة : nth-child ()يسمح لك بتحديد ليس فقط العناصر الزوجية أو الفردية أو الفرعية برقم ترتيبي محدد ، ولكن أيضًا العناصر الفرعية المحددة بواسطة صيغة رياضية أولية. دعنا نلقي نظرة على المحدد التالي ونفهم ما يعنيه هذا الإدخال:
td: nth-child (4n + 2)- 4 ن- كل عنصر رابع.
- 2
يمكنك استخدام القيم بعلامة الطرح في الصيغ ، لكن هذا ليس ضروريًا في العادة:
td: nth-child (4n-1)(لون الخلفية: lightblue ؛ / * اضبط لون الخلفية * /)يعني هذا المحدد أن كل خلية رابعة في الجدول (
- 4 ن- كل عنصر رابع.
- -1 - أي عنصر أبدأ به.
دعنا نلقي نظرة على مثال عن الاستخدام:
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 2 | |||||||||||||
| 3 | |||||||||||||
| 4 |
في هذا المثال ، باستخدام الفئة الزائفة: nth-child ، اخترنا وصممنا كل خلية رابعة في الجدول (
basicweb.ru
كيف يعمل محدد CSS nth-child
يوجد محدد في CSS ، وبشكل أكثر تحديدًا محدد زائف يسمى nth-child. مثال على استخدامه:
Ul li: nth-child (3n + 3) (color: #ccc ؛)
يقوم CSS أعلاه بما يلي: تطبيق الأنماط على كل عنصر ثالث في قائمة التعداد النقطي. وهي 3 ، 6 ، 9 ، 12 ، إلخ. ولكن كيف يعمل؟ وأيضًا كيف يمكنك الاستفادة من استخدام nth-child؟
النقطة الأساسية هي التعبير بين قوسين. يقبل nth-child كلمتين أساسيتين: حتى في(حتى) و الفردية(الفردية). معناها واضح تماما. حتى أنه يختار العناصر الزوجية (2 ، 4 ، 6) ، الفردي يختار العناصر الفردية (1 ، 3 ، 5).
كما هو موضح في المثال أعلاه ، يمكن لـ nth-child التعامل مع التعبيرات. ما هو أبسط تعبير ممكن؟ مجرد رقم. إذا كتبت رقمًا بين قوسين ، فسيتم تحديد عنصر واحد فقط. على سبيل المثال ، لنحدد العنصر الخامس في القائمة:
Ul li: nth-child (5) (اللون: #ccc ؛)
دعنا نعود إلى مثالنا الأول ، حيث استخدمنا التعبير (3n + 3). كيف يعمل؟ لماذا يختار كل عنصر ثالث؟ بيت القصيد في المتغير ن. يقبل القيم الصحيحة من الصفر وأكثر. دعونا نلقي نظرة فاحصة:
(3 × 0) + 3 = 3 = العنصر الثالث (3 × 1) + 3 = 6 = العنصر السادس (3 × 2) + 3 = 9 = العنصر التاسع ، إلخ.
لنجرب الآن التعبير التالي: nth-child (2n + 1):
(2 × 0) + 1 = 1 = العنصر الأول (2 × 1) + 1 = 3 = العنصر الثالث (2 × 2) + 1 = 5 = العنصر الخامس ، إلخ.
في النهاية ، حصلنا على نفس الشيء كما في حالة الفردي ، لذلك ليست هناك حاجة لاستخدام مثل هذا التعبير كثيرًا. علاوة على ذلك ، يمكن أيضًا تبسيط مثالنا الأول واستخدامه بدلاً من التعبير الأصلي (3n + 3) ، التعبير (3n):
(3 × 0) + 0 = 0 = لا يوجد تطابق (3 × 1) + 0 = 3 = العنصر الثالث (3 × 2) + 0 = 6 = العنصر السادس ، إلخ.
كما ترى ، النتيجة هي نفسها ، لكنك لست بحاجة إلى كتابة "+3". يمكننا أيضًا استخدام القيم السالبة في التعبير. على سبيل المثال ، 4n-1:
(4 × 0) - 1 = -1 = لا يوجد تطابق (4 × 1) - 1 = 3 = العنصر الثالث (4 × 2) - 1 = 7 = العنصر السابع ، إلخ.
يبدو استخدام القيم السالبة للمعامل عند n غريبًا بعض الشيء ، لأنه إذا كانت النتيجة سالبة ، فلن يتم العثور على تطابق. ستحتاج إلى تغيير التعبير باستمرار لإضافة عناصر إيجابية. كما اتضح ، فإن هذا النهج مناسب جدًا لاختيار العناصر n الأولى. ضع في اعتبارك مثالاً بـ "-n + 3":
0 + 3 = 3 = العنصر الثالث -1 + 3 = 2 = العنصر الثاني -2 + 3 = 1 = العنصر الأول -3 + 3 = 0 = لا يوجد تطابق
التوافق عبر المستعرضات
nth-child هي واحدة من تلك السمات المؤسفة التي تعمل عبر المتصفح بالكامل باستثناء الصفر المطلق في IE ، حتى الإصدار الثامن. لذلك ، عندما يتعلق الأمر باستخدامه ، إذا كانت النتيجة المتوقعة بطريقة ما تأثير مرئي (على سبيل المثال ، تلوين صفوف جدول معين) ، فهذه طريقة مثالية. لكن ربما لا يجب عليك استخدامه لشيء أكثر أهمية قد يؤثر ، على سبيل المثال ، على صحة التخطيط.
بالطبع ، إذا كنت تستخدم jQuery ، فلا داعي للقلق بشأن ذلك ، لأن jQuery يعمل حتى في Internet Explorer.
وأخيرا
يمكنك التلاعب بتعبيرات محددات مختلفة في صفحة المثال.
www.css-tricks.ru
القيم
| المعنى | وصف |
|---|---|
| عدد | رقم موجب يبدأ من 1. يحدد رقم العنصر الذي نريد الإشارة إليه. العناصر مرقمة بدءًا من 1. |
| الفردية | العناصر الفردية. |
| حتى في | حتى العناصر. |
| تعبير | يمكنك كتابة تعبيرات خاصة بالحرف n ، والتي تشير إلى جميع الأعداد الصحيحة من صفر (ليس من واحد!)إلى ما لا نهاية. إذن ، 2n تعني جميع الأرقام الزوجية (بدءًا من الثانية). كيف نفهم هذا؟ عوض بـ n بأرقام متتالية من 0 وهكذا: إذا كان n = 0 ، فإن 2n ستعطي 0 - لا يوجد مثل هذا العنصر ( ترقيم العناصر من 1!) ، إذا كانت n = 1 ، فإن 2n تعطي 2 - العنصر الثاني ، إذا كانت n = 2 ، تعطي 2n 4 - العنصر الرابع. إذا كتبت 3n ، فسيكون كل عنصر ثالث (بدءًا من العنصر الثالث!) ، وهكذا. |
أمثلة على
مثال
في هذا المثال ، سنجعل لي أحمر ، وهو 4 سليلوالدها (الرابع داخل رأ):
نتيجة تنفيذ الكود:
مثال
الآن دعونا نجعل كل شيء أحمر حتى فيلي:
نتيجة تنفيذ الكود:
مثال
الآن دعونا نجعل كل شيء أحمر الفرديةلي:
نتيجة تنفيذ الكود:
مثال
الآن دعونا نجعلها حمراء كل ثالثلي (بدءًا من الثالث):
نتيجة تنفيذ الكود:
مثال
في المحدد ، يمكنك تحديد نطاق من العناصر. لنفترض أن لديك قائمة تضم 20 عنصرًا وتريد تحديد العناصر من 7 إلى 14 ، ضمناً. يمكنك القيام بذلك على النحو التالي:
نتيجة تنفيذ الكود:
كود.mu
بناء الجملة
يتم تحديد الفئة الزائفة nth-child باستخدام وسيطة واحدة ، والتي تمثل نمط العناصر المطابقة.
قيم الكلمات الرئيسية
فردي يمثل العناصر التي يكون موضعها الرقمي في سلسلة من الأشقاء فرديًا: 1 ، 3 ، 5 ، إلخ. حتى يمثل العناصر التي يكون موقعها الرقمي في سلسلة من الأشقاء زوجيًا: 2 ، 4 ، 6 ، إلخ.تدوين وظيفي
النحو الرسمي
: nth-child (أين
أين
أين
أين
يوجد محدد في CSS ، وبشكل أكثر تحديدًا محدد زائف يسمى nth-child. مثال على استخدامه:
Ul li: nth-child (3n + 3) (color: #ccc ؛)
يقوم CSS أعلاه بما يلي: تطبيق الأنماط على كل عنصر ثالث في قائمة التعداد النقطي. وهي 3 ، 6 ، 9 ، 12 ، إلخ. ولكن كيف يعمل؟ وأيضًا كيف يمكنك الاستفادة من استخدام nth-child؟
النقطة الأساسية هي التعبير بين قوسين. يقبل nth-child كلمتين أساسيتين: حتى في(حتى) و الفردية(الفردية). معناها واضح تماما. حتى أنه يختار العناصر الزوجية (2 ، 4 ، 6) ، الفردي يختار العناصر الفردية (1 ، 3 ، 5).
كما هو موضح في المثال أعلاه ، يمكن لـ nth-child التعامل مع التعبيرات. ما هو أبسط تعبير ممكن؟ مجرد رقم. إذا كتبت رقمًا بين قوسين ، فسيتم تحديد عنصر واحد فقط. على سبيل المثال ، لنحدد العنصر الخامس في القائمة:
Ul li: nth-child (5) (اللون: #ccc ؛)
دعنا نعود إلى مثالنا الأول ، حيث استخدمنا التعبير (3n + 3). كيف يعمل؟ لماذا يختار كل عنصر ثالث؟ بيت القصيد في المتغير ن. يقبل القيم الصحيحة من الصفر وأكثر. دعونا نلقي نظرة فاحصة:
(3 × 0) + 3 = 3 = العنصر الثالث (3 × 1) + 3 = 6 = العنصر السادس (3 × 2) + 3 = 9 = العنصر التاسع ، إلخ.
لنجرب الآن التعبير التالي: nth-child (2n + 1):
(2 × 0) + 1 = 1 = العنصر الأول (2 × 1) + 1 = 3 = العنصر الثالث (2 × 2) + 1 = 5 = العنصر الخامس ، إلخ.
في النهاية ، حصلنا على نفس الشيء كما في حالة الفردي ، لذلك ليست هناك حاجة لاستخدام مثل هذا التعبير كثيرًا. علاوة على ذلك ، يمكن أيضًا تبسيط مثالنا الأول واستخدامه بدلاً من التعبير الأصلي (3n + 3) ، التعبير (3n):
(3 × 0) + 0 = 0 = لا يوجد تطابق (3 × 1) + 0 = 3 = العنصر الثالث (3 × 2) + 0 = 6 = العنصر السادس ، إلخ.
كما ترى ، النتيجة هي نفسها ، لكنك لست بحاجة إلى كتابة "+3". يمكننا أيضًا استخدام القيم السالبة في التعبير. على سبيل المثال ، 4n-1:
(4 × 0) - 1 = -1 = لا يوجد تطابق (4 × 1) - 1 = 3 = العنصر الثالث (4 × 2) - 1 = 7 = العنصر السابع ، إلخ.
يبدو استخدام القيم السالبة للمعامل عند n غريبًا بعض الشيء ، لأنه إذا كانت النتيجة سالبة ، فلن يتم العثور على تطابق. ستحتاج إلى تغيير التعبير باستمرار لإضافة عناصر إيجابية. كما اتضح ، فإن هذا النهج مناسب جدًا لاختيار العناصر n الأولى. ضع في اعتبارك مثالاً بـ "-n + 3":
0 + 3 = 3 = العنصر الثالث -1 + 3 = 2 = العنصر الثاني -2 + 3 = 1 = العنصر الأول -3 + 3 = 0 = لا يوجد تطابق
التوافق عبر المستعرضات
nth-child هي واحدة من تلك السمات المؤسفة التي تعمل عبر المتصفح تمامًا باستثناء الصفر المطلق في IE ، حتى الإصدار الثامن. لذلك ، عندما يتعلق الأمر باستخدامه ، إذا كانت النتيجة المتوقعة بطريقة ما تأثير مرئي (على سبيل المثال ، تلوين صفوف جدول معين) ، فهذه طريقة مثالية. لكن ربما لا يجب عليك استخدامه لشيء أكثر أهمية قد يؤثر ، على سبيل المثال ، على صحة التخطيط.
بالطبع ، إذا كنت تستخدم jQuery ، فلا داعي للقلق بشأن ذلك ، لأن jQuery يعمل حتى في Internet Explorer.
وأخيرا
يمكنك اللعب مع تعبيرات محدد مختلفة على
وصف
تُستخدم فئة: nth-child الزائفة لتصميم العناصر بناءً على الترقيم في شجرة العناصر.
بناء الجملة
العنصر: nth-child (فردي | زوجي |<число> | <выражение>) {...}
القيم
فردي جميع أرقام العناصر الفردية. حتى جميع أرقام العناصر الزوجية. number هو الرقم الترتيبي للطفل بالنسبة لوالديه. يبدأ الترقيم من 1 ، وسيكون هذا هو العنصر الأول في القائمة. التعبير المحدد كـ a + b ، حيث a و b عدد صحيح و n عداد يأخذ تلقائيًا القيمة 0 ، 1 ، 2 ...إذا كانت a تساوي صفرًا ، فلن تتم كتابتها ويتم اختصار السجل إلى b. إذا كانت b تساوي صفرًا ، فإنها أيضًا غير محددة ويتم كتابة التعبير بالصيغة an. يمكن أن تكون a و b أرقامًا سالبة ، وفي هذه الحالة تتغير علامة الجمع إلى سالب ، على سبيل المثال: 5n-1.
باستخدام القيم السالبة لـ a و b ، يمكن أيضًا أن تكون بعض النتائج سالبة أو صفرية. ومع ذلك ، لا تتأثر العناصر إلا بالقيم الموجبة نظرًا لأن ترقيم العناصر يبدأ من 1.
طاولة يسرد 1 بعض التعبيرات والكلمات الأساسية المحتملة ، ويشير أيضًا إلى أرقام العناصر التي سيتم استخدامها.
HTML5 CSS3 IE Cr Op Sa Fx
| 2134 | 2135 | 2136 | 2137 | 2138 | |
| بترول | 16 | 34 | 62 | 74 | 57 |
| ذهب | 4 | 69 | 72 | 56 | 47 |
| خشب | 7 | 73 | 79 | 34 | 86 |
| الحجارة | 23 | 34 | 88 | 53 | 103 |
في هذا المثال ، تُستخدم فئة: nth-child pseudo-class لتغيير نمط الصف الأول من الجدول ، وكذلك لتلوين جميع الصفوف ذات الأرقام الزوجية (الشكل 1).
يوجد مثل هذا المحدد ، وبشكل أكثر دقة فئة زائفة تسمى: nth-child. إليك مثال على استخدامه:
UL LI: nth-child (3n + 3) (اللون: #CCC ؛)
ماذا يفعل CSS أعلاه؟ يختار كل عنصر ثالث داخل القائمة النقطية: هذا هو الثالث ، السادس ، التاسع ، الثاني عشر ، إلخ. دعونا نرى بالضبط كيف يعمل هذا التعبير وماذا يمكن أن نفعل مع: nth-child.
كل هذا يتوقف على ما هو بين قوسين. يقبل المحدد: nth-child كلمتين رئيسيتين ، زوجي وفردي. كل شيء بسيط هنا: حتى أنه يختار العناصر الزوجية ، مثل الثاني والرابع والسادس وما إلى ذلك ، ويختار الفردي العناصر الفردية ، مثل الأول والثالث والخامس وما إلى ذلك.
كما ترى في المثال الأول: يقبل nth-child أيضًا التعبيرات كمعامل. بما في ذلك أبسط المعادلات ، بمعنى آخر ، مجرد أرقام. إذا وضعتها بين قوسين ، فسيتم تحديد عنصر واحد فقط مع الرقم المقابل. على سبيل المثال ، إليك كيفية تحديد العنصر الخامس فقط:
UL LI: nth-child (5) (اللون: #CCC ؛)
ومع ذلك ، لنعد إلى 3n + 3 من المثال الأول. كيف يعمل ولماذا يتم اختيار كل عنصر ثالث؟ الحيلة كلها في فهم المتغير n والمعادلة الجبرية المختزلة. فكر في n كمجموعة من الأعداد الصحيحة على أساس الصفر. ثم أكمل المعادلة. إذن 3n تساوي 3 × n ، والمعادلة كلها معًا هي (3 × n) +3. الآن ، بالتعويض عن الأعداد التي تكون أكبر من أو تساوي صفرًا بدلاً من n ، نحصل على:
- (3 × 0) + 3 = 3 = العنصر الثالث
- (3 × 1) + 3 = 6 = العنصر السادس
- (3 × 2) + 3 = 9 = العنصر التاسع ، إلخ.
ماذا عن: nth-child (2n + 1)؟
- (2 × 0) + 1 = 1 = العنصر الأول
- (2 × 1) + 1 = 3 = العنصر الثالث
- (2 × 2) + 1 = 5 = العنصر الخامس ، إلخ.
حتى يوقفوا! هذا هو نفس الغريب. إذن ربما لا يجب عليك استخدام هذا التعبير؟ لكن ألا نبالغ في تعقيد مثالنا الأول في هذه الحالة؟ ماذا لو كتبنا 3n + 0 بدلاً من 3n + 3 ، أو حتى أبسط 3n؟
- (3 × 0) = 0 = لا شيء
- (3 × 1) = 3 = العنصر الثالث
- (3 × 2) = 6 = العنصر السادس
- (3 × 3) = 9 = العنصر التاسع ، إلخ.
لذا ، كما ترى ، النتيجة واحدة ، مما يعني أنه لا حاجة إلى +3. يمكننا أيضًا استخدام قيم n سالبة ، بالإضافة إلى الطرح في المعادلات. على سبيل المثال ، 4n-1:
- (4 × 0) - 1 = –1 = لا شيء
- (4 × 1) - 1 = 3 = العنصر الثالث
- (4 × 2) - 1 = 7 = العنصر السابع ، إلخ.
قد يبدو استخدام -n غريبًا ، لأنه إذا كانت النتيجة النهائية سلبية ، فلن يتم تضمين أي عناصر في التحديد. ولكن إذا أكملنا المعادلة وجعلنا النتيجة إيجابية مرة أخرى ، فستكون العينة مثيرة جدًا للاهتمام: باستخدامها سيكون من الممكن الحصول على أول n من العناصر ، على سبيل المثال ، مثل هذا: -n + 3:
- –0 + 3 = 3 = العنصر الثالث
- -1 + 3 = 2 = العنصر الثاني
- –2 + 3 = 1 = العنصر الأول
- –3 + 3 = 0 = لا شيء ، إلخ.
يحتوي موقع SitePoint على مرجع جيد مع إشارة لطيفة سأقوم بنشرها بلا خجل هنا:
| ن | 2n + 1 | 4n + 1 | 4n + 4 | 4 ن | 5n-2 | -n + 3 |
|---|---|---|---|---|---|---|
| 0 | 1 | 1 | 4 | – | – | 3 |
| 1 | 3 | 5 | 8 | 4 | 3 | 2 |
| 2 | 5 | 9 | 12 | 8 | 8 | 1 |
| 3 | 7 | 13 | 16 | 12 | 13 | – |
| 4 | 9 | 17 | 20 | 16 | 18 | – |
| 5 | 11 | 21 | 24 | 20 | 23 | – |
دعم المتصفح
محدد: nth-child هو أحد محددات CSS القليلة المدعومة بالكامل تقريبًا في المتصفحات الحديثة وغير مدعومة تمامًا في IE ، ولا حتى IE8. لذلك ، عندما يتعلق الأمر باستخدامه ، يتم إجراء النتيجة النهائية وفقًا لتقنية التحسين التدريجي - يمكنك استخدامه بأمان لبعض عناصر التصميم ، مثل صفوف جدول التلوين. ومع ذلك ، يجب ألا تستخدمه في الحالات الأكثر خطورة. على سبيل المثال ، يمكنك الاعتماد عليها في تخطيط موقعك ، أو إزالة الهامش الأيمن من كل كتلة ثالثة في شبكة من ثلاثة إلى ثلاثة بحيث تناسب صفًا واحدًا.