استفاده از: nth-of-type (n) با جداول
برای ساختن جداول برای خواندن آسان تر، اغلب مفید است که ردیف های با رنگ های متناوب پس زمینه را سبک کنید. یکی از رایج ترین شیوه های سبک جداول، تنظیم رنگ پس زمینه هر ردیف دیگر است. این اغلب به عنوان "راه راه گورخر" شناخته می شود.
شما می توانید این کار را انجام دهید با قرار دادن هر ردیف دیگر با یک کلاس CSS و سپس تعریف سبک برای آن کلاس. این کار می کند اما بهترین یا کارآمد ترین راه برای انجام آن نیست.
هنگام استفاده از این روش، هر بار که شما نیاز به ویرایش آن جدول دارید، ممکن است مجبور شوید هر سطر در جدول را ویرایش کنید تا اطمینان حاصل شود هر ردیف با تغییرات سازگار است. به عنوان مثال، اگر شما یک ردیف جدید را به جدول خود وارد کنید، هر سطر دیگر زیر آن نیاز به تغییر کلاس دارد.
CSS باعث می شود که جدول ها با نوارهای گورخر سبک شوند. شما نیازی به اضافه کردن هیچ ویژگی اضافی HTML یا کلاس CSS ندارید، شما فقط از انتخاب nth-of-type (n) CSS استفاده می کنید .
n: نوع n (n) یک کلاس pseudo-class ساختاری در CSS است که به شما امکان می دهد عناصر را براساس روابط خود با عناصر والدین و برادران خود سبک کنید. شما می توانید از آن برای انتخاب یک یا چند عنصر بر اساس سفارش منبع خود استفاده کنید. به عبارت دیگر، آن می تواند هر عنصر که فرزند n یک نوع خاص از پدر و مادرش است مطابقت کند.
نامه n می تواند یک کلمه کلیدی (مانند یک عدد و یا حتی)، یک عدد یا یک فرمول باشد.
برای مثال، برای تمیز کردن هر تگ پاراگراف دیگری با رنگ پس زمینه زرد، سند CSS شما شامل موارد زیر خواهد بود:
p: nth-of-type (odd) {
پس زمینه: زرد
}
با جدول HTML خود شروع کنید
اول، جدول خود را همانطور که شما آن را به طور معمول در HTML ارسال کنید. هر کلاس خاصی را به سطر یا ستون اضافه نکنید.
در جدول شیوه خود، CSS زیر را اضافه کنید:
tr: nth-of-type (odd) {
رنگ پس زمینه: #ccc؛
}
این یک ردیف دیگر را با یک رنگ پس زمینه خاکستری شروع می کند که از ردیف اول شروع می شود.
ستون های متحرک سبک در همان راه
شما می توانید همان نوع از یک ظاهر طراحی شده را به ستون در جداول خود را انجام دهید. برای انجام این کار، به سادگی tr در کلاس CSS خود را به TD تغییر دهید. مثلا:
td: nth-of-type (odd) {
رنگ پس زمینه: #ccc؛
}
با استفاده از فرمول ها در n-select نوع (n) انتخاب کنید
نحو برای فرمول مورد استفاده در انتخابگر یک + b است.
a یک عدد است که نشان دهنده سیکل یا اندازه شاخص است.
n در حقیقت حرف "n" است و نشانگر یک شمارنده است که ستاره در 0 است.
+ یک اپراتور است که ممکن است "-" باشد
ب یک عدد صحیح است و نشان دهنده مقدار افست است. به عنوان مثال، چند سطر پایین باید انتخاب کننده شروع به استفاده از رنگ پس زمینه. این الزام است اگر یک اپراتور در فرمول گنجانده شود.
برای مثال، اگر شما می خواهید رنگ پس زمینه را برای هر ردیف 3 تنظیم کنید، فرمول شما 3n + 0 خواهد بود. CSS شما ممکن است مانند این باشد:
tr: nth-of-type (3n + 0) {
پس زمینه: slategray؛
}
ابزارهای مفید برای استفاده از nth نوع انتخابگر
اگر شما احساس کمی از جنبه فرمول استفاده از انتخاب نوع nth نوع از شبه کلاس استفاده کنید، سعی کنید: n تست سایت به عنوان یک ابزار مفید است که می تواند به شما کمک کند تعریف نحو برای رسیدن به نگاه شما می خواهید. از منوی کشویی برای انتخاب nth-of-type استفاده کنید (همچنین می توانید با سایر کلاسهای pseudo در اینجا نیز مانند nth-child آزمایش کنید).