چنین انتخاب کننده ای وجود دارد، به طور خاص یک شبه کلاس، به نام :nth-child. در اینجا نمونه ای از کاربرد آن است:
UL LI: nth-child(3n+3) (رنگ:#CCC؛ )
CSS بالا چه کاری انجام می دهد؟ هر سومین عنصر داخل را انتخاب می کند لیست گلوله ای: این 3، 6، 9، 12 و غیره است. بیایید ببینیم این عبارت دقیقا چگونه کار می کند و چه کارهای دیگری می توان با :nth-child انجام داد.
همه چیز به آنچه بین براکت ها است بستگی دارد. انتخابگر :nth-child دو کلمه کلیدی را می پذیرد: زوج و فرد. اینجا ساده است: زوج عناصر زوج مانند 2، 4، 6، و غیره را انتخاب می کند و فرد، عناصر فرد، مانند 1، 3، 5، و غیره را انتخاب می کند.
همانطور که از مثال اول می بینید، :nth-child عبارات را نیز به عنوان پارامتر می پذیرد. از جمله ساده ترین معادلات، به عبارت دیگر، فقط اعداد. اگر آنها را در پرانتز قرار دهید، فقط یک عنصر با شماره مربوطه انتخاب می شود. برای مثال، در اینجا نحوه انتخاب تنها عنصر پنجم آمده است:
UL LI: nth-child(5) ( color:#CCC; )
با این حال، اجازه دهید به 3n+3 از مثال اول برگردیم. چگونه کار می کند و چرا هر عنصر سوم انتخاب می شود؟ کل ترفند در درک متغیر n و معادله جبری کاهش یافته است. n را به عنوان مجموعه ای از اعداد صحیح مبتنی بر صفر در نظر بگیرید. سپس معادله را کامل کنید. بنابراین 3n 3×n است و کل معادله با هم (3×n)+3 است. حال، با جایگزینی اعداد بزرگتر یا مساوی صفر به جای n، به دست می آوریم:
- (3 × 0) + 3 = 3 = عنصر سوم
- (3 × 1) + 3 = 6 = ششمین عنصر
- (3 × 2) + 3 = 9 = نهمین عنصر و غیره.
در مورد: n-فرزند (2n+1) چطور؟
- (2 × 0) + 1 = 1 = 1 عنصر
- (2×1) + 1 = 3 = عنصر سوم
- (2 × 2) + 1 = 5 = عنصر پنجم و غیره.
بله بس کن! همان عجیب و غریب است. پس شاید شما نباید از این عبارت استفاده کنید؟ اما آیا ما مثال اول خود را در این مورد بیش از حد پیچیده نمی کنیم؟ چه می شود اگر به جای 3n+3 3n+0 یا حتی ساده تر 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 یک راهنمای خوب با یک علامت خوب دارد که من بی شرمانه آن را در اینجا پست می کنم:
| n | 2n+1 | 4n+1 | 4n+4 | 4n | 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، آنچه می توانید با این شبه کلاس ایجاد کنید و اینکه چگونه می تواند مفید باشد صحبت خواهیم کرد. شبه کلاس :nth-child به شما امکان می دهد گروهی از عناصر را با ویژگی های مشترک انتخاب کنید. بیشتر برای انتخاب عناصر زوج یا فرد از یک گروه استفاده می شود. اغلب از آن برای شبیه سازی میز مانند گورخر با دادن رنگ های مختلف پس زمینه به ردیف های زوج و فرد استفاده می شود.
tr:nth-child (فرد) ( // رنگ پس‌زمینه ) tr:nth-child (زوج) (// رنگ پس‌زمینه دیگر)
شبه کلاس :nth-child همچنین به شما این امکان را می دهد که عناصر با ویژگی مشترک را به گروه ها تقسیم کنید و سپس یک عنصر خاص را از هر گروه با استفاده از نحو زیر انتخاب کنید:
Tr: فرزند نهم (an+b) ( )
اینجا آتعداد عناصر گروه را تعیین می کند و بتعیین می کند که کدام عنصر از گروه انتخاب شود. اگر از مقدار استفاده کنید 2n+1سپس عناصر به گروه‌های دوتایی تقسیم می‌شوند و اولین عناصر هر گروه، یعنی عناصری با عدد ترتیبی فرد انتخاب می‌شوند. اگر از مقدار استفاده کنید 2n+2، سپس عناصر دوباره به گروه های دوتایی تقسیم می شوند، اما اکنون عناصر دوم هر گروه، یعنی عناصر با شماره سریال زوج انتخاب می شوند.
به عنوان مثال برای درک شبه کلاس :nth-child، هر چهارمین عنصر را با آن انتخاب می کنیم، یعنی چهارم، هشتم، دوازدهم، شانزدهم و غیره. برای این کار، عناصر را به گروه های چهارتایی تقسیم می کنیم و سپس هر چهارمین عنصر را انتخاب کنید.
Tr:nth-child (4n+4 ) (// style هر چهارمین عنصر)
در زیر لیستی از ده عنصر وجود دارد و ما از کلاس‌های شبه :nth-child، :first-child و :last-child برای انتخاب عناصری که می‌خواهیم برجسته کنیم استفاده می‌کنیم.
استفاده از کلاس شبه CSS:nth-child برای انتخاب یک عنصر
با تنظیم شبه کلاس :nth-child به عنوان یک عدد، می توانید انتخاب کنید که به کدام فرزند گروه مراجعه کنید:
عنصر 1
عنصر 2
عنصر 3
عنصر 4
عنصر 5
عنصر 6
عنصر 7
عنصر 8
عنصر 9
عنصر 10
#selector_example li:nth-child (4 ) (اندازه قلم: 150
با استفاده از CSS:nth-child شبه کلاس برای انتخاب همه عناصر به جز پنج اول
اگر شبه کلاس :nth-child را روی مقداری از فرم تنظیم کنید n+شماره، شما می توانید همه عناصر را انتخاب کنید، با عنصر با این عدد ترتیبی شروع کنید:
عنصر 1
عنصر 2
عنصر 3
عنصر 4
عنصر 5
عنصر 6
عنصر 7
عنصر 8
عنصر 9
عنصر 10
#selector_example li:nth-child (n+6 ) (اندازه قلم: 150 %؛ font-weight:bold ; رنگ: سبز؛ )
با استفاده از CSS:nth-child شبه کلاس برای انتخاب فقط پنج عنصر اول
وقتی شبه کلاس :nth-child را روی یک مقدار منفی قرار می دهیم n+عدد، همه عناصری را که قبل از عنصر هستند با این عدد ترتیبی انتخاب می کنیم:
عنصر 1
عنصر 2
عنصر 3
عنصر 4
عنصر 5
عنصر 6
عنصر 7
عنصر 8
عنصر 9
عنصر 10
#selector_example li:nth-child (-n+5 ) (اندازه قلم: 150 %؛ font-weight:bold ; رنگ: سبز؛ )
با استفاده از CSS:nth-child شبه کلاس برای انتخاب هر عنصر سوم
شبه کلاس :nth-child را می توان برای انتخاب دنباله ای از عناصر با تعیین تعداد عناصر در دنباله و شماره سریالعنصر مورد نظر اگر مقدار را تعیین کنید 3n+1، هر عنصر سوم انتخاب خواهد شد، از اول شروع می شود:
عنصر 1
عنصر 2
عنصر 3
عنصر 4
عنصر 5
عنصر 6
عنصر 7
عنصر 8
عنصر 9
عنصر 10
#selector_example li:nth-child (3n+1 ) (اندازه قلم: 150 %؛ font-weight:bold ; رنگ: سبز؛ )
با استفاده از کلاس شبه CSS:nth-child برای انتخاب فقط عناصر فرد
شما می توانید شبه کلاس :nth-child را روی فرد تنظیم کنید تا همه عناصر با اعداد ترتیبی فرد انتخاب شوند. یعنی عناصر اول، سوم، پنجم، هفتم، نهم و .... این برای تنظیم رنگ برای ردیف های جدول مجاور بسیار مفید است.
عنصر 1
عنصر 2
عنصر 3
عنصر 4
عنصر 5
عنصر 6
عنصر 7
عنصر 8
عنصر 9
عنصر 10
#selector_example li:nth-child (فرد) (اندازه قلم: 150 %؛ font-weight:bold ; رنگ: سبز؛ )
استفاده از کلاس شبه CSS:nth-child برای انتخاب فقط عناصر زوج
این مثال مشابه نمونه قبلی را نشان می دهد، اما این بار تمام عناصر زوج انتخاب شده اند. یعنی عناصر دوم، چهارم، ششم، هشتم، دهم و غیره:
عنصر 1
عنصر 2
عنصر 3
عنصر 4
عنصر 5
عنصر 6
عنصر 7
عنصر 8
عنصر 9
عنصر 10
#selector_example li:nth-child (حتی) (اندازه قلم: 150 %؛ font-weight:bold ; رنگ: سبز؛ )
با استفاده از CSS:first-child شبه کلاس برای انتخاب اولین عنصر
یک شبه کلاس دیگر: first-child اولین عنصر را انتخاب می کند:
عنصر 1
عنصر 2
عنصر 3
عنصر 4
عنصر 5
عنصر 6
عنصر 7
عنصر 8
عنصر 9
عنصر 10
#selector_example li:first-child ( اندازه فونت: 150 %؛ font-weight:bold ; رنگ: سبز؛ )
با استفاده از CSS:last-child شبه کلاس برای انتخاب آخرین عنصر
علاوه بر شبه کلاس :first-child، یک شبه کلاس :last-child نیز وجود دارد که آخرین عنصر را از گروهی از عناصر انتخاب می کند:
عنصر 1
عنصر 2
عنصر 3
عنصر 4
عنصر 5
عنصر 6
عنصر 7
عنصر 8
عنصر 9
عنصر 10
#selector_example li:last-child ( اندازه فونت: 150 %؛ font-weight:bold ; رنگ: سبز؛ )
استفاده از شبه کلاس CSS:nth-last-child برای انتخاب عنصر ماقبل آخر
همچنین می‌توانید از کلاس شبه :nth-last-child استفاده کنید که قابلیت‌های شبه کلاس :last-child و :nth-child را برای شروع شمارش عناصر از آخر ترکیب می‌کند. یعنی می توانید با شمارش شماره سریال های انتهای گروه یک عنصر را انتخاب کنید، به عنوان مثال در یک گروه ده عنصری می توانید عنصر دوم را از انتهای گروه انتخاب کنید:
عنصر 1
عنصر 2
عنصر 3
عنصر 4
عنصر 5
عنصر 6
عنصر 7
عنصر 8
عنصر 9
عنصر 10
#selector_example li:nth-last-child (2) (اندازه قلم: 150 %؛ font-weight:bold ; رنگ: سبز؛ )
شبه کلاس :nth-child را با " بررسی کنید
شبه کلاس :nth-child برای اضافه کردن یک ظاهر به عناصر بر اساس شماره گذاری در درخت عنصر استفاده می شود.
نشانه گذاری
| شرح | مثال | |
|---|---|---|
| <тип> | نوع مقدار را مشخص می کند. | <размер> |
| A&&B | مقادیر باید به ترتیب مشخص شده خروجی شوند. | <размер> && <цвет> |
| A | ب | نشان می دهد که فقط یکی از مقادیر پیشنهادی (A یا B) باید انتخاب شود. | عادی | کلاه های کوچک |
| الف || ب | هر مقدار را می توان به تنهایی یا در ترکیب با مقادیر دیگر به هر ترتیبی استفاده کرد. | عرض || شمردن |
| مقادیر گروه ها | [ محصول || صلیب] | |
| * | صفر یا چند بار تکرار کنید. | [,<время>]* |
| + | یک یا چند بار تکرار کنید. | <число>+ |
| ? | نوع، کلمه یا گروه مشخص شده اختیاری است. | درونی؟ |
| (الف، ب) | حداقل A را تکرار کنید، اما نه بیشتر از B بار. | <радиус>{1,4} |
| # | یک یا چند بار با کاما از هم جدا شده اند. | <время># |
ارزش های
فرد همه اعداد عنصر فرد. حتی همه اعداد زوج.<число>شماره سریال عنصر کودکدر مورد پدر و مادرش شماره گذاری از 1 شروع می شود که اولین عنصر در لیست خواهد بود.<выражение>به صورت an±b مشخص می شود، جایی که a و b اعداد صحیح هستند و n شمارنده ای است که به طور خودکار مقادیر 0، 1، 2 را می گیرد...
اگر a صفر باشد، نوشته نمی شود و نماد به b کاهش می یابد. اگر b صفر باشد، آن نیز حذف می شود و عبارت به صورت an نوشته می شود. a و b می توانند اعداد منفی باشند که در این صورت علامت مثبت به منفی تبدیل می شود، به عنوان مثال: 5n-1.
با استفاده از مقادیر منفی برای a و b، برخی از نتایج نیز می توانند منفی یا صفر باشند. با این حال، عناصر تنها تحت تأثیر مقادیر مثبت قرار می گیرند، زیرا شماره گذاری عناصر از 1 شروع می شود.
روی میز. 1 برخی از عبارات و کلمات کلیدی ممکن را فهرست می کند و نشان می دهد که کدام اعداد عنصر درگیر خواهند شد.
| معنی | شماره اقلام | شرح |
|---|---|---|
| 1 | 1 | عنصر اول مترادفی برای :فرست فرزند شبه کلاس است. |
| 5 | 5 | عنصر پنجم. |
| 2n | 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,… | هر عنصر سوم، با عنصر دوم شروع می شود. |
| n+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 برای انتخاب طیفی از عناصر قابل قبول است. در اینجا، تمام عناصر از دوم تا پنجم انتخاب خواهند شد.
: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 |
AT این مثالشبه کلاس :nth-child برای تغییر سبک ردیف اول جدول و همچنین رنگ آمیزی تمام ردیف های زوج استفاده می شود (شکل 1).
برنج. 1. اعمال شبه کلاس: nth-child در ردیف های جدول
مشخصات
هر مشخصات از چندین مرحله تایید می گذرد.
- توصیه (توصیه) - مشخصات توسط W3C تأیید شده و به عنوان یک استاندارد توصیه می شود.
- توصیه نامزد ( توصیه احتمالی) - گروه مسئول استاندارد از تحقق اهداف خود راضی است اما برای اجرای استاندارد نیاز به حمایت جامعه توسعه است.
- پیشنهاد پیشنهادی ( توصیه پیشنهادی) - در این مرحله سند برای تایید نهایی به هیئت مشورتی W3C ارائه می شود.
- پیش نویس کاری - نسخه بالغ تر پیش نویس پس از بحث و بررسی و اصلاحات برای بررسی جامعه.
- پیش نویس سردبیر ( پیش نویس سرمقاله) یک نسخه پیش نویس استاندارد پس از اعمال تغییرات توسط ویراستاران پروژه است.
- پیش نویس ( پیش نویس مشخصات) اولین نسخه پیش نویس استاندارد است.
ورود شما را به وبلاگم خوش آمد می گویم. من می خواهم امروز در مورد نحوه انتخاب اولین عنصر والد در css بنویسم، زیرا این به شما امکان می دهد از کلاس های سبک کمتری استفاده کنید.
شبه کلاس ها: فرزند اول و اول نوع تفاوت در چیست؟
برای اشاره به اولین عنصر از کانتینر والد در css، دو کلاس شبه اختراع شد. من بلافاصله پیشنهاد می کنم همه چیز را با یک مثال در نظر بگیرید تا متوجه شوید:
این یک پاراگراف است
این یک پاراگراف است
این یک پاراگراف است
این یک پاراگراف است
این یک پاراگراف است
فرض کنید چنین نشانه گذاری داریم. هدف این است که به پاراگراف اول رجوع کنید و آن را جدا از بقیه بدون اضافه کردن کلاس به آن استایل کنید. این را می توان به صورت زیر انجام داد:
#wrapper p:first-child(
رنگ: قرمز؛
}
رنگ پاراگراف اول قرمز می شود، می توانید بررسی کنید.
#wrapper p: first-of-type(
رنگ: قرمز؛
}
همین اتفاق خواهد افتاد. پس چه فرقی دارد؟ و در این واقعیت نهفته است که شبه کلاس اول نوع اول را با توجه به نوع آن جستجو می کند و اولین عنصر والد را پیدا می کند و فرزند اول به دنبال چیزی نمی گردد - فقط اولین عنصر والد را می گیرد که می آید و اگر یک پاراگراف است، سبک هایی را برای آن اعمال می کند. در غیر این صورت چیزی انتخاب و اعمال نخواهد شد.
این یک پاراگراف است
این یک پاراگراف است
این یک پاراگراف است
این یک پاراگراف است
این یک پاراگراف است
حال در نظر بگیرید: آیا نوع اول در این مورد کار می کند؟ بله، زیرا نوع عنصر را در نظر می گیرد و اولین پاراگراف را انتخاب می کند و نه اولین پاراگراف را. آیا فرزند اول کار می کند؟ آن را امتحان کنید. کار نخواهد کرد زیرا پاراگراف اولین عنصر در والد نیست.
من شخصاً تفاوت بین این شبه کلاس ها را بلافاصله متوجه نشدم و مدتی گیج شدم اما اکنون امیدوارم به طور معمول برای شما توضیح داده باشم.
یکی دیگر از جزئیات مهم
المان‌ها از عنصر والد شمارش می‌شوند، بنابراین اگر به صورت زیر مشخص کنید:
Li: اولین نوع(
…
}
سپس اولین موارد لیست در تگ بدنه (یعنی در کل صفحه) انتخاب می شود. بنابراین، در هر لیستی، اولین مورد به صورت متفاوتی قالب بندی می شود.
اگه اینجوری مینویسی:
#sidebar li: first-of-type(
…
}
سپس فقط اولین موارد لیست ها در نوار کناری، یعنی ستون کناری سایت ما انتخاب می شود.
با استفاده از انتخابگرهای مختلفی که در مورد آنها نوشتم، می توانید تقریباً به هر عنصری در یک صفحه وب دسترسی پیدا کنید. در این مقاله می توانید در مورد نحوه کار با شبه کلاس nth-child در css بیشتر بخوانید و از نظر انتخاب عنصر گزینه هایی را در اختیار شما قرار می دهد.
به هر حال، من فراموش کردم که به کلاس های شبه مخالف اشاره کنم - آخرین فرزند (و آخرین نوع، به ترتیب). آنها به شما امکان می دهند آخرین عنصر را از ظرف والد انتخاب کنید.
کجا می توانید عمل کنید
من در مورد این شبه کلاس ها می نویسم زیرا آنها به طور فعال هنگام چیدمان استفاده می شوند css. در اینجا شما در صفحه، به عنوان مثال، یک بلوک از پست های مشابه، یا نظرات، یا چیز دیگری دارید. و ایده ای داشتید که اولین عنصر آن را به نحوی خاص تزئین کنید. یا شاید آخرین. و بله، هر کسی می تواند.
فقط باید نام بلوکی که عنصر مورد نظر در آن ذخیره شده است را پیدا کنید. فرض کنید با رکوردهای محبوب سروکار داریم. کانتینر اصلی یک کلاس محبوب دارد. سپس اینگونه می نویسیم:
محبوب li: first-of-type(
قسمت بالای پد: 20 پیکسل
}
همه چیز، اولین مورد از لیست موجود در آن یک تورفتگی از بالا دریافت کرده است و شما می توانید هر آنچه را که می خواهید به استایل ها اضافه کنید.
در اینجا یک مثال دیگر وجود دارد. من فقط سه بلوک خاکستری یکسان در برچسب بدن دارم. اینجوری بنویسیم
شرح
شبه کلاس :nth-child برای اضافه کردن یک ظاهر به عناصر بر اساس شماره گذاری در درخت عنصر استفاده می شود.
نحو
عنصر:nth-child(فرد | زوج |<число> | <выражение>) {...}
ارزش های
فرد همه اعداد عنصر فرد. حتی همه اعداد زوج. شماره شماره ترتیبی کودک نسبت به والدینش. شماره گذاری از 1 شروع می شود که اولین عنصر در لیست خواهد بود. عبارت به صورت an+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 برای تغییر استایل سطر اول جدول و همچنین رنگ آمیزی تمام سطرهای زوج استفاده می شود (شکل 1).