سلکتور های css بخش هشتم
سلکتور های css بخش هشتم X:checked و (X:nth-child(n
سلکتور های css بخش هشتم را از سری مقالات سلکتورهای css در سایت آموزی برای شما عزیزان تهیه کردیم.
در بخش هفتم با سه سه سلکتور کاربردی دیگر آشنا شدید.
سلکتور های css بخش هشتم
در بخش هشتم نیز به معرفی و توضیح کامل سه سلکتور دیگر css می پردازیم.
انتخابگر ( X:checked Selector )
این سلکتور هر عنصری را که قبلا چک شده باشد را انتخاب میکند.
برای مثال یک دکمه رادیویی ، یک چک باکس و …
برای مثال فرض کنید یک تگ input با نوع radio داریم:
[html]<input type=”radio” checked>[/html]
حالا به کد 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 )
این سلکتور جهت انتخاب یکی از فرزندان یک عنصر یا المان به کار می رود.
شما کافی است شماره فرزند المان یا تگی که میخواهید انتخاب کنید را وارد کنید.
به مثال زیر توجه کنید :
[html]<div>
<li><img src=”photo1″ alt=”photo1 سلکتور های css بخش هشتم X:checked و (X:nth-child(n”></li>
<li><img src=”photo2″ alt=”photo2 سلکتور های css بخش هشتم X:checked و (X:nth-child(n”></li>
<li><img src=”photo3″ alt=”photo3 سلکتور های css بخش هشتم X:checked و (X:nth-child(n”></li>
</div>[/html]
همانطور که می بینید سه تگ li داریم که داخل تگ div شامل سه عکس با تگ های img هستند.
اگر بخواهیم فرزند دوم تگ div که li دومی می شود را انتخاب کنیم کافی است از سلکتور بالا به شکل زیر دستور را بنویسیم:
div:nth-child(2) { width: 300px; }
در دستور بالا دومین فرزند تگ div یعنی li دومی انتخاب شده است. و تنها عرض همین li که دارای یک تگ img داخلش می باشد تغییر خواهد کرد و سایر li ها در این روش سلکت نشده و تغییر نمی کنند.
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
سلکتور های css بخش هشتم X:checked و (X:nth-child(n – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید