مدخلأول عنوان h2 لعلامة المقالة
- واحد
- اثنين
- ثلاثة
حتى العناصر المغلق. فئات CSS الزائفة: Css-child و nth-of-type Css حدد العنصر الثاني
أرحب بكم في مدونتي. أود أن أكتب اليوم عن موضوع كيفية تحديد العنصر الأصل الأول في css ، لأن هذا يسمح لك باستخدام فئات نمط أقل.
الفصول الزائفة: الطفل الأول والأول من نوعه ما هو الفرق؟
للإشارة إلى العنصر الأول من الحاوية الرئيسية في css ، تم اختراع صنفين زائفين. أقترح على الفور النظر في كل شيء بمثال حتى تفهم:
هذه فقرة
هذه فقرة
هذه فقرة
هذه فقرة
هذه فقرة
لنفترض أن لدينا مثل هذا الترميز. الهدف هو الرجوع إلى الفقرة الأولى وتصميمها بشكل منفصل عن الفقرة الأخرى دون إضافة فئات إليها. يمكن القيام بذلك على النحو التالي:
# غلاف p: أول طفل (
لون احمر؛
}
سيتحول لون الفقرة الأولى إلى اللون الأحمر ، يمكنك التحقق.
# غلاف p: الأول من نوعه (
لون احمر؛
}
نفس الشيء سيحدث. إذن ما الفرق؟ وهو يكمن في حقيقة أن البحث من الدرجة الأولى من النوع الزائف والعثور على العنصر الأول للوالد ، بالنظر إلى نوعه ، والطفل الأول لا يبحث عن أي شيء - إنه يأخذ فقط العنصر الأول من الوالد الذي يصادفها ، وإذا كانت فقرة ، فقم بتطبيق الأنماط عليها. إذا لم يكن كذلك ، فلن يتم تحديد أي شيء وتطبيقه.
هذه فقرة
هذه فقرة
هذه فقرة
هذه فقرة
هذه فقرة
فكر الآن: هل سيعمل الأول من نوعه في هذه الحالة؟ نعم ، لأنه يأخذ في الاعتبار نوع العنصر وسيحدد الفقرة الأولى ، وليس أول العناصر. هل سيعمل الطفل الأول؟ جربها. لن يعمل لأن الفقرة ليست العنصر الأول في الأصل.
أنا شخصياً لم أفهم على الفور الفرق بين هذه الفئات الزائفة وشعرت بالارتباك لبعض الوقت ، لكن الآن ، آمل أن أكون قد شرحتها لك بشكل طبيعي.
تفاصيل مهمة أخرى
يتم حساب العناصر من العنصر الأصل ، لذلك إذا حددت مثل هذا:
لي: الأول من نوعه (
…
}
ثم سيتم تحديد عناصر القائمة الأولى في علامة النص الأساسي (أي في الصفحة بأكملها). وبالتالي ، في أي قائمة ، سيتم تنسيق العنصر الأول بشكل مختلف.
إذا كتبت مثل هذا:
#sidebar li: الأول من نوعه (
…
}
بعد ذلك ، سيتم تحديد العناصر الأولى فقط من القوائم الموجودة في الشريط الجانبي ، أي العمود الجانبي على موقعنا.
باستخدام المحددات المتنوعة التي كتبت عنها ، يمكنك الوصول إلى أي عنصر تقريبًا على صفحة الويب. في هذه المقالة ، يمكنك قراءة المزيد حول كيفية العمل مع الفئة الزائفة nth-child في css وتعطيك خيارات من حيث اختيار العنصر.
بالمناسبة ، نسيت أن أذكر الفصول الزائفة المعاكسة - الطفل الأخير (والأخير من النوع ، على التوالي). تسمح لك بتحديد العنصر الأخير من الحاوية الرئيسية.
أين يمكنك وضعه موضع التنفيذ
أكتب عن هذه الفئات الزائفة لأنها مستخدمة بكثرة في تخطيط css. يوجد هنا على الصفحة ، على سبيل المثال ، كتلة من المنشورات أو التعليقات المشابهة أو أي شيء آخر. وكان لديك فكرة لتزيين عنصرها الأول بطريقة خاصة بطريقة خاصة. أو ربما الأخير. ونعم ، يمكن لأي شخص.
تحتاج فقط إلى معرفة اسم الكتلة التي يتم تخزين العنصر المطلوب فيها. لنفترض أننا نتعامل مع السجلات الشعبية. الحاوية الرئيسية لديها فئة شعبية. ثم نكتب هكذا:
Popular li: الأول من نوعه (
الحشو العلوي: 20 بكسل
}
كل شيء ، العنصر الأول من القائمة فيه حصل على مسافة بادئة من أعلى ، ويمكنك إضافة ما تريد إلى الأنماط.
هنا مثال آخر. لدي ثلاث كتل رمادية متطابقة فقط في علامة الجسم. لنكتب هكذا.
يمكن استخدام الفئات الزائفة لتحديد عنصر معين من القائمة. في هذا البرنامج التعليمي ، سنتحدث عن: فئة الأطفال الزائفة ، وما يمكنك إنشاؤه باستخدام هذه الفئة الزائفة ، وكيف يمكن أن تكون مفيدة. تسمح لك الفئة الزائفة nth-child بتحديد مجموعة من العناصر ذات الخصائص المشتركة. يتم استخدامه بشكل شائع لتحديد العناصر الزوجية أو الفردية من مجموعة. غالبًا ما يتم استخدامه لجعل الجدول يبدو وكأنه حمار وحشي من خلال إعطاء ألوان خلفية مختلفة للصفوف الفردية والزوجية.
فئة زائفة أخرى: nth-child يسمح لك بفصل العناصر باستخدام الملكية المشتركةفي مجموعات ثم حدد عنصرًا معينًا من كل مجموعة باستخدام الصيغة التالية:
هنا أيحدد عدد العناصر في المجموعة ، و بيحدد العنصر الذي سيتم اختياره من المجموعة.
ما إذا كان سيتم استخدام القيمة 2n + 1، ثم سيتم تقسيم العناصر إلى مجموعات من مجموعتين ، وسيتم تحديد العناصر الأولى من كل مجموعة ، أي العناصر ذات العدد الترتيبي الفردي. إذا كنت تستخدم القيمة 2n + 2، ثم سيتم تقسيم العناصر مرة أخرى إلى مجموعات من مجموعتين ، ولكن الآن سيتم تحديد العناصر الثانية من كل مجموعة ، أي العناصر ذات الرقم التسلسلي الزوجي.
كمثال لفهم: الفئة الزائفة nth-child ، سنختار كل عنصر رابع معها ، أي ، الرابع ، الثامن ، الثاني عشر ، السادس عشر ، إلخ. للقيام بذلك ، سنقسم العناصر إلى مجموعات من أربعة و ثم حدد كل عنصر رابع.
فيما يلي قائمة من عشرة عناصر ، وسنستخدم: nth-child و: first-child و: last-child pseudo-classes لتحديد العناصر التي نريد تمييزها.
استخدام CSS: الفئة الزائفة nth-child لتحديد عنصر واحد
من خلال تعيين: nth-child pseudo class كرقم ، يمكنك اختيار أي طفل من المجموعة للإشارة إليه:
العنصر 1
العنصر 2
العنصر 3
العنصر 4
العنصر 5
العنصر 6
العنصر 7
العنصر 8
العنصر 9
العنصر 10
استخدام CSS: الفئة الزائفة nth-child لتحديد جميع العناصر باستثناء العناصر الخمسة الأولى
إذا قمت بتعيين: nth-child pseudo class إلى قيمة النموذج ن + number ، يمكنك تحديد جميع العناصر ، بدءًا من العنصر بهذا الرقم الترتيبي:
العنصر 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 لتحديد كل عنصر ثالث
يمكن استخدام فئة: nth-child pseudo-class لتحديد سلسلة من العناصر عن طريق تحديد عدد العناصر في التسلسل والرقم الترتيبي العنصر المطلوب. إذا قمت بتعيين القيمة 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: فئة الأطفال الزائفة الأخيرة لتحديد العنصر الأخير
بالإضافة إلى: الدرجة الزائفة للطفل الأول ، هناك فئة زائفة للطفل الأخير ستحدد العنصر الأخير من مجموعة العناصر:
العنصر 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 مع المنشئ nth-child.
في بعض الأحيان ، عند تصميم الصفحات ، قد ترغب في "أتمتة" أنماط CSS قليلاً.
تتمثل إحدى المشكلات التي قد تواجهها في كيفية تحديد جميع العناصر الزوجية لقائمة وجدول وحظر وعناصر أخرى على صفحة ويب.
يمكنك بالطبع تعيين فئة معينة لكل عنصر زوجي ، ولكن هذا أمر جيد عندما لا يكون هناك الكثير من العناصر. إن إضافة كل هذا يدويًا ليس دائمًا ممكنًا وغير مرغوب فيه دائمًا.
أود أن أتحدث عن طريقة تقوم على استخدام فئة زائفة الطفل التاسع.
تم تقديم هذه الفئة الزائفة في 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 (odd) td (لون الخلفية: فضي ؛)
يحسب الجزء "an" من التعبير مواضع العناصر الفرعية باستخدام الصيغة التالية: number * 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.com
دعم المتصفح
المحدد: nth-child
هو أحد محددات CSS القليلة المدعومة بالكامل تقريبًا في المتصفحات الحديثة وغير مدعومة تمامًا في IE ، ولا حتى IE8. لذلك عندما يتعلق الأمر باستخدامه ، والنتيجة النهائية هي تحسين تدريجي ، يمكنك استخدامه بأمان لبعض العناصر المطبعية ، مثل تلوين صف الجدول. ومع ذلك ، لا ينبغي استخدامه في الحالات الأكثر خطورة. على سبيل المثال ، يمكنك الاعتماد عليها في تخطيط الموقع أو إزالة الهامش الأيمن من كل كتلة ثالثة في شبكة ثلاثة في ثلاثة بحيث تناسب صفًا واحدًا.
يمكن أن تعمل مكتبة jQuery كإنقاذ هنا ، والتي تنفذ الدعم لجميع محددات CSS ، بما في ذلك: nth-child ، حتى في Internet Explorer.
web-standards.com
الأهمية والتطبيق
فئة زائفة : nth-child ()يسمح لك بتحديد العناصر الفرعية داخل العنصر الأصل اعتمادًا على موضعها (الرقم التسلسلي).
ينتشر استخدام هذه الفئة الزائفة على نطاق واسع ، فهي تتيح لك تبديل أنماط الصفوف في الجداول والقوائم ونمط مجموعة من العناصر الفرعية وما إلى ذلك.
بناء جملة CSS:
: nth-child (رقم | كلمة رئيسية | صيغة)(كتلة إعلانية ؛)مثال على الاستخدام
التصميم حسب الرقم التسلسلي
لنلق نظرة على مثال تم تكليفك فيه بتغيير نمط جميع العناصر المميزة باللون البرتقالي في الصورة:
ما هو القاسم المشترك بين العناصر المميزة في الصورة؟ القاسم المشترك بينهم هو أنها مظللة باللون البرتقالي. مضحك؟ لا تفكر. لا يزال لديهم شيء مشترك ، العناصر
يمكن أيضًا حسابه ، وسيكون رقمه التسلسلي هو الثالث (الطفل الثالث لوالده ). لتصميم هذه العناصر ، نحتاج إلى استخدام فئة زائفة : nth-child.
دعنا ننتقل إلى مثال:
أول عنوان 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؟
المعنى الرئيسي في التعبير بين قوسين. يقبل 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 = لا يوجد تطابق
توافق Crossbrowser
nth-child هي إحدى السمات المؤسفة التي تعمل عبر المتصفح بالكامل ، باستثناء الصفر المطلق في IE ، حتى الإصدار 8. لذلك ، عندما يتعلق الأمر باستخدامه ، إذا كانت النتيجة المتوقعة هي نوع من التأثير المرئي (على سبيل المثال ، تلوين صفوف جدول معين) ، فهذه هي الطريقة المثالية. لكن ، على الأرجح ، لا يجب أن تستخدمه لشيء أكثر أهمية ، والذي قد يؤثر ، على سبيل المثال ، في التخطيط الصحيح.
بالطبع ، إذا كنت تستخدم 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 (أين
أين
أين
أين
يوجد مثل هذا المحدد ، وبشكل أكثر تحديدًا فئة زائفة ، تسمى: 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 × ن ، والمعادلة كلها معًا هي (3 × ن) +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 بدلاً من 3n + 3؟
- (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. لذلك عندما يتعلق الأمر باستخدامه ، والنتيجة النهائية هي تحسين تدريجي ، يمكنك استخدامه بأمان لبعض العناصر المطبعية ، مثل تلوين صف الجدول. ومع ذلك ، لا ينبغي استخدامه في الحالات الأكثر خطورة. على سبيل المثال ، يمكنك الاعتماد عليها في تخطيط الموقع أو إزالة الهامش الأيمن من كل كتلة ثالثة في شبكة ثلاثة في ثلاثة بحيث تناسب صفًا واحدًا.
وصف
تُستخدم فئة: nth-child pseudo-class لإضافة نمط إلى العناصر بناءً على الترقيم في شجرة العناصر.
بناء الجملة
العنصر: 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).