سلکتور های css بخش هشتم | سلکتور X:checked | سلکتور X:nth-child(n)

سلکتور های css بخش هشتم را از سری مقالات سلکتورهای css در سایت آموزی برای شما عزیزان تهیه کردیم.

در بخش هفتم با سه سه سلکتور کاربردی دیگر آشنا شدید.

سلکتور های css بخش هشتم

سلکتور های css بخش هشتم | سلکتور X:checked | سلکتور X:nth-child(n)

سلکتور های css بخش هشتم | سلکتور X:checked | سلکتور X:nth-child(n)

در بخش هشتم نیز به معرفی و توضیح کامل سه سلکتور دیگر css می پردازیم.

انتخابگر ( X:checked Selector )

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

برای مثال یک دکمه رادیویی ، یک چک باکس و …

برای مثال فرض کنید یک تگ input با نوع radio داریم:

حالا به کد css که از طریق آن این تگ input چک شده را انتخاب می کنیم توجه کنید :

input[type=”radio”]:checked { width: 500px; }

براساس قطعه کد css بالا تنها تگ input که چک شده بود را انتخاب و عرض آن را به ۵۰۰ پیکسل تغییر دادیم.

انتخابگر ( X:not Selector )

ممکن است زمانی نیاز داشته باشید ، مثلا همه تگ های img در یک سند HTML را به جز یک تگ خاص انتخاب کنید.

در این حالت باید چکار کنید؟! یک سلکتور کاربردی وجود دارد. که از طریق آن قابلیت این نوع انتخاب را به شما می دهد.

در مثال زیر با دستور CSS نوشته شده و استفاده از عبارت not می توانیم تمام تگ های img به جز تگ img با id خاص را انتخاب کنیم :

img:not(#picture1) { border: 3px solid silver; }

از طریق قطعه کد css بالا همه تگ های img سند به جز تگ img با شناسه picture1 را دارای border کردیم.

انتخابگر ( X:nth-child(n) Selector )

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

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

به مثال زیر توجه کنید :

همانطور که می بینید سه تگ li داریم که داخل تگ div شامل سه عکس با تگ های img هستند.

اگر بخواهیم فرزند دوم تگ div که li دومی می شود را انتخاب کنیم کافی است از سلکتور بالا به شکل زیر دستور را بنویسیم:

div:nth-child(2) { width: 300px; }

در دستور بالا دومین فرزند تگ div یعنی li دومی انتخاب شده است. و تنها عرض همین li که دارای یک تگ img داخلش می باشد تغییر خواهد کرد و سایر li ها در این روش سلکت نشده و تغییر نمی کنند.

سلکتور های css بخش هشتم | سلکتور X:checked | سلکتور X:nth-child(n) – اختصاصی سایت آموزی