چه کسی از فرزند نهم می ترسد؟

ek3nk4r 2023-04-04

0 35 خواندن این مطلب 6 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

فرض کنید باید کد را در شرکتی که در آن کار می کنید نگهداری کنید، و این را اینجا در CSS می بینید:

li:nth-child(n + 2):nth-child(-n + 9):nth-child(4n + 2)

شاید اولین واکنش شما این باشد:

میم اینجا جایی که نقاشی یک نفر با کوله پشتی پرنده از یک موقعیت ناخوشایند فرار می کند هیچ کاری انجام نمی شود.

کف بزن، کف بزن، کانیک ندهیم! یک قهوه بگیرید و بیایید قدم به قدم نحوه عملکرد این مگازورد را بررسی کنیم. پس از خواندن این مقاله، این ابزار قدرتمند که کلاس شبه :nth-child() است را درک کرده و از آن قدردانی خواهید کرد. گیج شده اید که شبه کلاس چیست؟ به مقاله sucodelarangela@ که در مراجع موجود است نگاهی بیندازید. اما، به طور کلی، فقط ذره “شبه” را که در مدرسه دیدیم (شبه علوم، شبه میوه ها) را به خاطر بسپارید، که به معنای چیزی است که به نظر می رسد، اما نیست. شبه کلاس ها انتخابگرهای CSS هستند که به شما کمک می کنند عناصر خاصی را بدون نیاز به ایجاد کلاس خاصی برای آنها هدف قرار دهید.

چند مورد را مطالعه کنیم؟

فهرست مطالب

1 – استفاده از :nth-child() با عدد مطلق

در اینجا، بسیار شهودی است: شما عنصری را انتخاب می کنید که فرزند n در دیگری است.

نهم؟؟؟؟

میم نازاری که در آن یک شخصیت سریالی با گیجی به محاسبات پیچیده نگاه می کند

خوب، شاید با مثال ها راحت تر باشد، درست است؟ این به صورت زیر است: اگر :nth-child(1) را قرار دهید، اولین عنصر، :nth-child(2)، دومین و غیره را انتخاب می کند.

در مثال زیر از انتخابگر استفاده کردم

.filho:nth-child(3)

مربع سوم را سبز رنگ کنید.

اینجا چه اتفاقی می‌افتد: ما عنصر را با کلاس “child” انتخاب می‌کنیم که همچنین فرزند سوم عنصر دیگری است. و این بسیار مهم است، همانطور که در زیر خواهیم دید.

یک اشتباه بسیار رایج این است که فکر کنید “من عنصر سوم را با کلاس ‘child’ می خواهم” و از nth-child استفاده کنید. مثال زیر را ببینید:

در سناریوی اول، ما سعی می کنیم عنصر را با کلاس فرزند که فرزند سوم فلان عنصر است هدف قرار دهیم. معلوم می شود که در این مورد، فرزند سوم یک تگ p بدون کلاس “فرزند” است. بنابراین CSS کسی را پیدا نمی کند که آن را سبز رنگ کند.

در سناریوی دوم، ما آن را با استفاده از nth-child(4) رفع می کنیم، اما رفع مشکل به هدف ما بستگی دارد (می تواند اعمال ‘.parent > :nth-child(3)’ یا حتی ‘:nth- باشد. از نوع (3)’، دستیابی به نتایج متفاوت).

آن وقت شما که تا اینجا خواندید فکر کنید «چه آسان! متوجه شدم، من حتی قصد ندارم بقیه را بخوانم» و به سمت پروژه خود می دود و می خواهد آن لیست پیوندها را سبک کند. با اطمینان شخصی که می داند CSS را می توان در 30 دقیقه یاد گرفت، تایپ کنید:

.lista__item__link:nth-child(3){ color: red;  }

با دیدن اینکه کار نکرد، با چشمانی پر از اشک به توییتر می دوید و هشتگ #ocaiomentiupramim را راه اندازی می کنید.

اما آنجا آرام باش بیایید درک کنیم که در اینجا چه اتفاقی افتاده است فرد فرضی با عجله.

لیست پیوندهای شما چیزی شبیه به این است:

اتفاقی که می افتد این است که شما به CSS می گفتید: “آنجا بدوید و به دنبال “lista_item__link” بگردید که فرزند سوم کسی است”. CSS رفت و فقط “list__item__link” را پیدا کرد که اولین فرزند “list_item” بود. او خیلی بهم ریخته بود، و با یک سطل رنگ قرمز استفاده نشده.

اکنون می‌دانید و می‌دانید که چگونه آن را برطرف کنید: فقط «list__item» سوم را هدف بگیرید و سپس فرزند آن را انتخاب کنید.

.lista__item:nth-child(3) > .lista__item__link{
  color: red;  
}

نمونه هایی که تاکنون دیده ایم چندان مفید به نظر نمی رسند. از آنجایی که ما فقط یک عنصر را هدف قرار می دهیم، استفاده از کلاس ها همیشه بدون به خطر انداختن قابلیت نگهداری کد امکان پذیر است. اگر لازم باشد یک عمل را برای عناصری که مضرب 3 هستند اعمال کنیم، چه؟ شما باید آن کلاس را چندین بار در HTML اعمال کنید. می توانید از nth-child(3)، nth-child-(6)، nth-child-(9)، nth-child(12) استفاده کنید، اما اگر از قبل نمی دانستید چه تعداد عنصر قرار است باشد؟ در آن لیست؟

اینجاست که فرزند n ام شروع به درخشش می کند.

2- استفاده از چندگانه

وقتی از «n» فرزند n استفاده می کنیم، گویی این «n» را با هر موقعیت از عناصر فرزند جایگزین می کنیم. یک ul که دارای 6 لی است و در آن انتخابگر “li:nth-child(2n)” را در پشت صحنه قرار می دهیم، این کار را انجام می دهد:

li:nth-child(2 * 1), logo li:nth-child(2);
li:nth-child(2 * 2), logo li:nth-child(4);
li:nth-child(2 * 3) , logo li:nth-child(6);
…
li:nth-child(2 * 6) , logo li:nth-child(12);

سپس عناصر 2، 4 و 6 را انتخاب می کرد.

فرض کنید باید کل مربع سوم لیست 20 مربعی را سبز رنگ کنیم. حالا خیلی راحت می توانیم این کار را انجام دهیم:

حال، اگر لازم بود این کار را انجام دهیم، از اول شروع کنیم، چه؟ در این صورت، اولی را رنگ کنید و سپس از سه به سه (چهارم، هفتم و …) بپرید؟

3- اضافه کردن جابجایی

خوب، ما قبلاً می دانیم که چگونه 3، 6، 9 را انتخاب کنیم … درست است؟

حالا این دو انتخاب را مقایسه کنید:

0º، 3º، 6º، 9º…
1، 4، 7، 10 …

تفاوت آنها در این است که در دومی به جای اینکه از صفر شروع کنیم از شماره 1 شروع می کنیم

برای انجام این کار با nth-child، فقط جابجایی را که می خواهیم به مضرب ‘n’ اضافه می کنیم. در این مورد، فرزند nام (3n + 1).

در صورت شک، n را با تعداد عناصر، به ترتیب، از صفر شروع کنید.

فرزند n (3n + 1) =>
nth-child(3 * 0 + 1), logo nth-child(1);
nth-child(3 * 1 + 1), logo nth-child(4);
nth-child(3 * 2 + 1), logo nth-child(7);
…
nth-child(3 * 20 + 1), logo nth-child(61);

این همچنین می تواند برای هدف قرار دادن همه عناصر به جز چند عنصر در ابتدا استفاده شود. فرض کنید می خواهیم همه مربع ها را سبز کنیم، به جز سه مورد اول.

اگر از “nth-child(n)” استفاده می کردیم، به آن می گفتیم که همه عناصر را انتخاب کند. اگه 1 اضافه میکردیم نتیجه همین میشد…!

توله سگ ناامید

در اینجا ما باید پرش گربه فرزند نهم را درک کنیم: تعداد او از 0 شروع می شود. بنابراین، وقتی 1 را اضافه می کنیم، هیچ تفاوتی در نتیجه نخواهیم دید. ما همیشه باید برای جبران این اولین “n-ghost” عددی پیش رو در نظر بگیریم.

فقط آن جایگزینی شیطانی را انجام دهید:
n-فرزند(n + 1) =>
nth-child(0 + 1), logo nth-child(1);
nth-child(1 + 1), logo nth-child(2);
nth-child(2 + 1), logo nth-child(3);
…
nth-child(20 + 1), logo nth-child(21);

با آن، می‌توان نتیجه گرفت که برای رد شدن از سه عنصر اول، باید 4 را با استفاده از nth-child(n + 4) اضافه کنیم. ما هنوز هم می توانیم به این شکل فکر کنیم: با استفاده از nth-child(n + 4) از عنصر چهارم به بعد انتخاب می کنیم.

ترفند دیگری از گربه فرزند n: تعداد “n” در واقع به تعداد عناصر موجود در لیست محدود نمی شود. به همین دلیل است که یک انتخابگر مانند nth-child(n – 5) که می تواند برای انتخاب همه موارد به جز پنج مورد آخر استفاده شود. کار نمی کند. این انتخابگر همه عناصر را انتخاب می کند. اما ما می توانیم آن را دور بزنیم.

4- فقط به اولی نگاه کنید

در مبحث قبلی، ما یاد گرفتیم که به همه موارد به جز اولین ها با نماد nth-child(n + X) نگاه کنیم. ما می‌توانیم برعکس این کار را انجام دهیم و فقط اولین عناصر X را مورد هدف قرار دهیم و بقیه را نه.
برای این منظور از “-n” استفاده می کنیم. نترس، به همین راحتی است!

وقتی nth-child(-n) را اعلام می کنیم، هیچ اتفاقی نمی بینیم. این به این دلیل است که در پشت صحنه CSS لیستی از 6 مورد را ایجاد می کند:

nth-child(-n) =>
nth-child(-1 * 0), logo nth-child(0);
nth-child(-1 * 1), logo nth-child(-1);
nth-child(-1 * 2), logo nth-child(-1);
…
nth-child(-1 * 6), logo nth-child(-6);
…

از آنجایی که هیچ عنصر منفی در فرزند n نداریم، هیچ کدام انتخاب نخواهد شد.

اما اگر مقدار X را به “-n” اضافه کنیم، می‌توانیم هر تعداد عنصر را از ابتدای لیست انتخاب کنیم!

nth-child(-n + 3) =>
nth-child(-1 * 0 + 3), logo nth-child(3);
nth-child(-1 * 1 + 3), logo nth-child(2);
nth-child(-1 * 2 + 3), logo nth-child(1);
…
nth-child(-1 * 6 + 3), logo nth-child(-3);
…

توجه داشته باشید که در این حالت سه عنصر اول را انتخاب می کنیم. بنابراین، می‌توانیم فکر کنیم که انتخابگر nth-child(-n + 3) می‌گوید “همه را انتخاب کنید، اما فقط تا عنصر سوم”.

مثال زیر را نیز ببینید:

5 – مونتاژ Megazord ما

اکنون ما آماده ایم تا هیولای فرزند نهم خود را جمع کنیم!

میم با بدنساز گفتن

فرض کنید می خواهیم از مربع هفتم انتخاب کنیم و در پانزدهم توقف کنیم.

برای انجام این کار، می‌توانیم انتخابگرهای فرزند nام را زنجیر کنیم!

.container__square:nth-child(n + 7):nth-child(-n + 15){
  background-color: green;
}

بنابراین ما به CSS می گوییم: “به آنجا بروید و تمام مربع ها را از هفتم به بعد سبز کنید، اما از پانزدهم فراتر نروید”.

اگر الان بخواهیم همان کار را انجام دهیم، اما از یکی بگذریم، چه؟

.container__square:nth-child(n + 7):nth-child(-n + 15):nth-child(2n + 1){
  background-color: green;
}

جسی پینکمن از سخنرانی Breaking Bad

به دست آوردیم!

آن درهم تنیدگی که اکنون غیرقابل کشف به نظر می رسید، بسیار زیباتر به نظر می رسد، اینطور نیست؟

با استفاده از nth-child در پروژه های خود می توانید انتخابگرهای پیچیده ای ایجاد کنید بدون اینکه کد خود را با کلاس های بسیار خاص آلوده کنید، که به عنوان مثال درج عناصر جدید در یک لیست را دشوار می کند.

به خاطر داشتن ابزار دیگری در کمربند کاربردی خود تبریک می گوییم.

منابع:

: فرزند نهم
https://css-tricks.com/almanac/selectors/n/nth-child/

:nth-child()
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

CSS nth-child() واقعا چگونه کار می کند؟
https://www.youtube.com/watch?v=KIIktcWu6hc&ab_channel=WesBos

درک CSS: شبه کلاس ها و شبه عناصر
https://dev.to/sucodelarangela/entendendo-css-pseudo-classes-e-pseudo-elementos-b83