کنترل بیشتر بر انتخاب های :nth-child() با نحو S

قبل از اعمال منطق An+B روی آن، مجموعه ای از عناصر فرزند را از قبل فیلتر کنید.

براموس

صفحه اصلی توییتر GitHub Mastodon

انتخابگرهای شبه کلاس :nth-child() و :nth-last-child()

با انتخابگر شبه کلاس :nth-child() می توان عناصر موجود در DOM را با شاخص آنها انتخاب کرد. با استفاده از میکروسینتکس An+B ، کنترل خوبی بر روی عناصری که می خواهید انتخاب کنید، بدست می آورید.

• :nth-child(2) : فرزند دوم را انتخاب کنید.
• :nth-child(2n) : همه فرزندان زوج (دوم، چهارم، ششم، هشتم و غیره) را انتخاب کنید.
• :nth-child(2n+1) : همه فرزندان فرد (1، 3، 5، 7 و غیره) را انتخاب کنید.
• :nth-child(5n+1) : 1st (=(5×0)+1) , 6th (=(5×1)+1) , 11th (=(5×2)+1) , … را انتخاب کنید .
• :nth-child(5n+2) : 2nd (=(5×0)+2) , 7th (=(5×1)+2) , 12th (=(5×2)+2) , … را انتخاب کنید .

توجه: برای مشاهده تعاملی که منطق An+B بر انتخاب‌ها تأثیر می‌گذارد ، از تستر :nth-child استفاده کنید.

اما، اگر پارامتر A را حذف کنید، انتخاب های خلاقانه تری وجود دارد که می توانید انجام دهید. مثلا:

• :nth-child(n+3) : هر کودک را از سومین کودک به بالا (سوم، چهارم، پنجم و غیره) انتخاب کنید.
• :nth-child(-n+5) : هر کودک را تا پنجمین (1، 2، 3، 4، 5) انتخاب کنید.

چند مورد از این انتخاب های :nth-child() را با هم ترکیب کنید و می توانید محدوده ای از عناصر را انتخاب کنید:

• :nth-child(n+3):nth-child(-n+5) : هر کودک را از سومین تا پنجمین (3، 4، 5) انتخاب کنید.

با استفاده از :nth-last-child() می توانید انتخاب های مشابهی انجام دهید، اما به جای اینکه از ابتدا شمارش را شروع کنید، از آخر شروع به شمارش می کنید.

توجه: اگر می‌خواهید آن را به سطح بعدی ببرید، می‌توانید از :nth-child() برای اعمال سبک‌ها بر روی گروهی از عناصر زمانی که به اندازه معینی می‌رسند ("Quantity Queries") استفاده کنید یا یک عنصر والد را بر اساس تعداد فرزندانی که دارد .

پیش فیلتر کردن انتخاب ها با نحو of S

جدید در CSS Selectors Level 4 این است که به صورت اختیاری یک لیست انتخابگر را به :nth-child() و :nth-last-child() ارسال کنید.

:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)

وقتی of S مشخص می شود، منطق An+B فقط بر روی عناصری اعمال می شود که با لیست انتخابگر داده شده S مطابقت دارند. این اساساً به این معنی است که می توانید قبل از اینکه An+B کار خودش را انجام دهد، کودکان را از قبل فیلتر کنید.

پشتیبانی مرورگر

• 111
• 111
• 113
• 9

مثال ها

برای مثال، :nth-child(2 of .highlight) دومین عنصر تطبیقی ​​را انتخاب می کند که دارای کلاس .highlight است. به عبارت دیگر: از بین همه کودکان دارای کلاس .highlight ، دومی را انتخاب کنید.

این برخلاف .highlight:nth-child(2) است که عنصری را انتخاب می کند که کلاس .highlight را دارد و همچنین فرزند دوم است.

در دمو زیر می توانید این تفاوت را ببینید:

• عنصری که با :nth-child(2 of .highlight) مطابقت دارد، طرح کلی صورتی دارد.
• عنصری که با .highlight:nth-child(2) مطابقت دارد طرح کلی سبز دارد.

توجه داشته باشید که S یک لیست انتخابگر است به این معنی که چندین انتخابگر را می پذیرد که با کاما از هم جدا شده اند. برای مثال، :nth-child(4 of .highlight, .sale) عنصر چهارم را که یا .highlight یا .sale است از مجموعه ای از خواهر و برادر انتخاب می کند.

در نسخه نمایشی زیر، عنصری که با :nth-child(4 of .highlight, .sale) مطابقت دارد، یک طرح نارنجی روی آن اعمال شده است.

راه راه گورخری، بازبینی شد

یک مثال کلاسیک که در آن از :nth-child() استفاده می شود، هنگام ایجاد یک جدول راه راه گورخر است. این یک تکنیک بصری است که در آن هر ردیف جدول رنگ‌های متناوب را تغییر می‌دهد. به طور معمول، این رویکرد به شرح زیر است:

tr:nth-child(even) {
  background-color: lightgrey;
}

در حالی که این برای جداول استاتیک به خوبی کار می کند، زمانی که شروع به فیلتر کردن محتویات جدول به صورت پویا می کنید مشکل ساز می شود. به عنوان مثال، وقتی ردیف دو مخفی می شود، در نهایت ردیف های یک و سه قابل مشاهده خواهید بود که هر کدام با رنگ پس زمینه یکسانی هستند.

برای رفع این مشکل، می‌توانیم :nth-child(An+B [of S]?) با حذف ردیف‌های پنهان از منطق An+B استفاده کنیم:

tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}

خیلی شیرینه، درسته؟

عکس از Markus Spiske در Unsplash

،

قبل از اعمال منطق An+B روی آن، مجموعه ای از عناصر فرزند را از قبل فیلتر کنید.

براموس

صفحه اصلی توییتر GitHub Mastodon

انتخابگرهای شبه کلاس :nth-child() و :nth-last-child()

با انتخابگر شبه کلاس :nth-child() می توان عناصر موجود در DOM را با شاخص آنها انتخاب کرد. با استفاده از میکروسینتکس An+B ، کنترل خوبی بر روی عناصری که می خواهید انتخاب کنید، بدست می آورید.

• :nth-child(2) : فرزند دوم را انتخاب کنید.
• :nth-child(2n) : همه فرزندان زوج (دوم، چهارم، ششم، هشتم و غیره) را انتخاب کنید.
• :nth-child(2n+1) : همه فرزندان فرد (1، 3، 5، 7 و غیره) را انتخاب کنید.
• :nth-child(5n+1) : 1st (=(5×0)+1) , 6th (=(5×1)+1) , 11th (=(5×2)+1) , … را انتخاب کنید .
• :nth-child(5n+2) : 2nd (=(5×0)+2) , 7th (=(5×1)+2) , 12th (=(5×2)+2) , … را انتخاب کنید .

توجه: برای مشاهده تعاملی که منطق An+B بر انتخاب‌ها تأثیر می‌گذارد ، از تستر :nth-child استفاده کنید.

اما، اگر پارامتر A را حذف کنید، انتخاب های خلاقانه تری وجود دارد که می توانید انجام دهید. مثلا:

• :nth-child(n+3) : هر کودک را از سومین کودک به بالا (سوم، چهارم، پنجم و غیره) انتخاب کنید.
• :nth-child(-n+5) : هر کودک را تا پنجمین (1، 2، 3، 4، 5) انتخاب کنید.

چند مورد از این انتخاب های :nth-child() را با هم ترکیب کنید و می توانید محدوده ای از عناصر را انتخاب کنید:

• :nth-child(n+3):nth-child(-n+5) : هر کودک را از سومین تا پنجمین (3، 4، 5) انتخاب کنید.

با استفاده از :nth-last-child() می توانید انتخاب های مشابهی انجام دهید، اما به جای اینکه از ابتدا شمارش را شروع کنید، از آخر شروع به شمارش می کنید.

توجه: اگر می‌خواهید آن را به سطح بعدی ببرید، می‌توانید از :nth-child() برای اعمال سبک‌ها بر روی گروهی از عناصر زمانی که به اندازه معینی می‌رسند ("Quantity Queries") استفاده کنید یا یک عنصر والد را بر اساس تعداد فرزندانی که دارد .

پیش فیلتر کردن انتخاب ها با نحو of S

جدید در CSS Selectors Level 4 این است که به صورت اختیاری یک لیست انتخابگر را به :nth-child() و :nth-last-child() ارسال کنید.

:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)

وقتی of S مشخص می شود، منطق An+B فقط بر روی عناصری اعمال می شود که با لیست انتخابگر داده شده S مطابقت دارند. این اساساً به این معنی است که می توانید قبل از اینکه An+B کار خودش را انجام دهد، کودکان را از قبل فیلتر کنید.

پشتیبانی مرورگر

• 111
• 111
• 113
• 9

مثال ها

برای مثال، :nth-child(2 of .highlight) دومین عنصر تطبیقی ​​را انتخاب می کند که دارای کلاس .highlight است. به عبارت دیگر: از بین همه کودکان دارای کلاس .highlight ، دومی را انتخاب کنید.

این برخلاف .highlight:nth-child(2) است که عنصری را انتخاب می کند که کلاس .highlight را دارد و همچنین فرزند دوم است.

در دمو زیر می توانید این تفاوت را ببینید:

• عنصری که با :nth-child(2 of .highlight) مطابقت دارد، طرح کلی صورتی دارد.
• عنصری که با .highlight:nth-child(2) مطابقت دارد طرح کلی سبز دارد.

توجه داشته باشید که S یک لیست انتخابگر است به این معنی که چندین انتخابگر را می پذیرد که با کاما از هم جدا شده اند. برای مثال، :nth-child(4 of .highlight, .sale) عنصر چهارم را که یا .highlight یا .sale است از مجموعه ای از خواهر و برادر انتخاب می کند.

در نسخه نمایشی زیر، عنصری که با :nth-child(4 of .highlight, .sale) مطابقت دارد، یک طرح نارنجی روی آن اعمال شده است.

راه راه گورخری، بازبینی شد

یک مثال کلاسیک که در آن از :nth-child() استفاده می شود، هنگام ایجاد یک جدول راه راه گورخر است. این یک تکنیک بصری است که در آن هر ردیف جدول رنگ‌های متناوب را تغییر می‌دهد. به طور معمول، این رویکرد به شرح زیر است:

tr:nth-child(even) {
  background-color: lightgrey;
}

در حالی که این برای جداول استاتیک به خوبی کار می کند، زمانی که شروع به فیلتر کردن محتویات جدول به صورت پویا می کنید مشکل ساز می شود. به عنوان مثال، وقتی ردیف دو مخفی می شود، در نهایت ردیف های یک و سه قابل مشاهده خواهید بود که هر کدام با رنگ پس زمینه یکسانی هستند.

برای رفع این مشکل، می‌توانیم :nth-child(An+B [of S]?) با حذف ردیف‌های پنهان از منطق An+B استفاده کنیم:

tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}

خیلی شیرینه، درسته؟

عکس از Markus Spiske در Unsplash