چنین انتخاب کننده ای وجود دارد، به طور خاص یک شبه کلاس، به نام :nth-child. در اینجا نمونه ای از کاربرد آن است:
UL LI: nth-child(3n+3) (رنگ:#CCC؛ )
CSS بالا چه کاری انجام می دهد؟ هر عنصر سوم را در لیست گلوله‌دار انتخاب می‌کند: این عنصر سوم، ششم، نهم، دوازدهم و غیره است. بیایید ببینیم این عبارت دقیقا چگونه کار می کند و چه کارهای دیگری می توان با :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. بنابراین وقتی نوبت به استفاده از آن می‌رسد، و نتیجه نهایی بهبود تدریجی است، می‌توانید با خیال راحت از آن برای برخی از عناصر چاپی مانند رنگ‌آمیزی ردیف جدول استفاده کنید. اما در موارد جدی تر نباید از آن استفاده کرد. به عنوان مثال، در چیدمان سایت به آن تکیه کنید یا حاشیه سمت راست را از هر بلوک سوم در یک شبکه سه در سه حذف کنید تا در یک ردیف قرار گیرند.
CSS nth-childیک کلاس شبه است که برای انتخاب عناصر با استفاده از یک عبارت عددی استفاده می شود. سینتکس آن ممکن است در نگاه اول کمی گیج کننده به نظر برسد.
در این مقاله به موارد زیر خواهیم پرداخت:
- روش های مختلف استفاده از :nth-child ;
- منعطف تر: انتخابگر نوع nth.
- و انتخابگرهای :nth-last-child و :nth-last-of-type مربوط به آنها.
:nth-Last-of-type
:nth-last-of-type اگر موقعیت آنها در سند با الگوی توصیف شده توسط عبارت جبری مطابقت داشته باشد، عناصر فرزند را انتخاب می کند.
انتخابگر :nth-last-of-type چیزی شبیه به این است:
li:nth-child(expression); ()
"بیان" را می توان با کلمات کلیدی زوج یا فرد، یک عدد صحیح یا فرمولی مانند an+b نشان داد که در آن a و b اعداد صحیح، مثبت یا منفی هستند.
زیرا از شبه کلاس n ام فرزند CSS می توان برای انتخاب محدوده استفاده کرد عناصر مختلف. بیایید به چند مثال نگاه کنیم تا واضح تر شود.
من دارم لیست گلوله ایاز 12 عنصر بیایید ببینیم چگونه می توانیم از :nth-child برای انتخاب یک عنصر خاص یا مجموعه ای از عناصر در یک الگو استفاده کنیم:
- لورم اپیسوم
- لورم اپیسوم
- لورم اپیسوم
- لورم اپیسوم
- لورم اپیسوم
- لورم اپیسوم
- لورم اپیسوم
- لورم اپیسوم
- لورم اپیسوم
- لورم اپیسوم
- لورم اپیسوم
- لورم اپیسوم
برای انتخاب عنصر سوم لیست، باید li:nth-child(3) را مشخص کنید. می توانید از کلمه کلیدی زوج برای انتخاب همه عناصر زوج استفاده کنید. برعکس، می‌توانید از :nth-child(odd) برای انتخاب همه عناصر با اعداد فرد استفاده کنید.
CSS فرزند نهم هر سومین - li:nth-child(3n) را مشخص کنید. برای انتخاب چهار عنصر اول، از li:nth-child(-n+4) استفاده کنید. برای انتخاب همه عناصر به جز چهار عنصر اول، می توان از li:nth-child(n+5) استفاده کرد.
عبارت an + b
جایگزینی برای استفاده از کلمه کلیدی فرد، استفاده از عبارت 2n+1 است. اما چگونه کار می کند؟
وقتی یک عبارت an+b حاوی مقادیر غیر صفر a و b باشد، عناصر فرزند به گروه‌ها تقسیم می‌شوند. اگر عبارت 2n+1 باشد، عناصر فرزند به گروه‌های دوتایی تقسیم می‌شوند. به هر عنصر در گروه یک شاخص اختصاص داده می شود که از 1 شروع می شود. عنصر مربوطه در هر گروه شاخص شماره b است. در مثال ما، این اولین عنصر خواهد بود.
اگر عبارت 3n+2 باشد، عناصر توسط سه عنصر گروه بندی می شوند و عنصر دوم در هر گروه با عبارت مطابقت دارد.
اگر مقدار b منفی باشد، عنصر منطبق در گروه، عنصر موجود در شاخص b است. اما از شاخص 1 معکوس شمارش می شود. در این صورت، عنصر مربوطه نه به این، بلکه متعلق به گروه قبلی خواهد بود.
کلمه کلیدی زوج در فرزند n CSS را می توان به صورت 2n بیان کرد. در این مورد، ما مقداری برای b نداریم، بنابراین هر عنصر از گروه با شاخص a انتخاب می شود. 2n هر عنصر دوم را انتخاب می کند، 3n هر سوم را انتخاب می کند، 4n هر چهارم را انتخاب می کند و غیره.
من شخصاً مفهوم تقسیم عناصر کودک به گروه ها و یافتن شاخص مطابقت برای هر گروه را بسیار گیج کننده می دانم. اگرچه مشخصات انتخابگرهای CSS آنها را اینگونه توصیف می کند.
من مفهوم جستجوی هر عنصر n را ترجیح می دهم - هر 2، 3 یا 4، و غیره. و سپس برای من آسان تر است که تصور کنم که قسمت دوم عبارت یک افست است.
در مورد 2n+1 این عبارت را به صورت زیر می خوانم: هر عنصر دوم را پیدا کنید و انتخاب را 1 به پایین ببرید».
اگر عبارت 3n-5 باشد، به این صورت خواهد بود: هر عنصر سوم را پیدا کنید و انتخاب را 5 به بالا ببرید».
انتخابگرهای دیگر: فرزند دوم
:nth-child یک شبه کلاس مربوطه دارد :nth-last-child که برعکس عمل می کند.
li:nth-last-child(3n) از آخرین شروع می شود عنصر کودکو آنها را به عقب پردازش می کند و با هر عنصر سوم از انتهای لیست مطابقت دارد.
این شبه کلاس کمتر رایج است. با این حال، اغلب لازم است اولین یا آخرین عنصر فرزند را انتخاب کنید. این را می توان با :nth-child(1) یا :nth-last-child(1) انجام داد، اما این روش به اندازه شبه کلاس های :first-child و :last-child رایج نیست. با این حال، فقط :first-child در IE8 کار می کند، انتخابگرهای :last-child و :nth این کار را نمی کنند.
:نامین نوع
چیزی که اغلب من را آزار می دهد این است که شبه کلاس فرزند nام CSS عناصر فرزند را بر اساس شاخص مرتب می کند و نوع عنصر را در نظر نمی گیرد.
مثال زیر را در نظر بگیرید.
Aenean commodo ligula eget dolor. Vestibulum dapibus nunc ac augue; Nunc sed turpis. Donec posuere vulputate arcu;لورم اپیسوم؛
یک بخش با یک عنوان، یک عنوان فرعی و چندین پاراگراف وجود دارد. من می خواهم پاراگراف اول کمی با اندازه فونت بزرگتر 1.5em برجسته شود.
ممکن است بخواهید از کد بخش p:first-child استفاده کنید، زیرا باید یک استایل اضافی به پاراگراف اول آن بخش اضافه کنید. اما این کار نمی کند زیرا فرزند اول بخش h1 است. در این حالت باید از انتخابگر :first-of-type استفاده شود.
وجود دارد کل خطانتخابگرهای این نوع عبارتند از: first-of-type، :last-of-type،:nth-of-type و :nth-last-of-type. آنها دقیقاً مانند :nth-child رفتار می کنند، اما نمونه های n ام از عناصر یک نوع خاص را انتخاب می کنند.
شرح
شبه کلاس :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 |
AT این مثالشبه کلاس :nth-child برای تغییر سبک ردیف اول جدول و همچنین رنگ آمیزی تمام ردیف های زوج استفاده می شود (شکل 1).
ورود شما را به وبلاگم خوش آمد می گویم. من می خواهم امروز در مورد نحوه انتخاب اولین عنصر والد در 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 به شما امکان می دهد گروهی از عناصر را با ویژگی های مشترک انتخاب کنید. بیشتر برای انتخاب عناصر زوج یا فرد از یک گروه استفاده می شود. اغلب از آن برای شبیه سازی میز مانند گورخر با دادن رنگ های مختلف پس زمینه به ردیف های زوج و فرد استفاده می شود.
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 را با " بررسی کنید