مدرس: بیایید حالا یاد بگیریم
درباره چیزی به نام شبه‌کلاس‌ها (pseudo-classes)
خب شبه‌کلاس شاید خیلی عجیب به نظر بیاد
اما در واقع خیلی ساده و سرراست هست
و به عنوان یک مثال بیایید سعی کنیم استایل بدیم
به اولین المنت‌های لیست به شکلی متفاوت از بقیه
پس ما این لیست رو داریم و اون لیست رو
و همونطور که گفتم بیایید اولین المنت هر لیست رو
به شکل متفاوتی استایل بدیم
مثلاً با بولد کردن اون‌ها
پس این المنت و اون یکی المنت
خب ساده‌ترین روش برای این کار اینه که
یک کلاس به هر کدوم اضافه کنیم
و بعد استایل بدیم درسته؟
پس بیایید اول اون روش رو امتحان کنیم
اینجا یکی از لیست‌هاست
پس بیایید یک کلاس به اسم first-li اضافه کنیم
و بعد همین کار رو برای لیست دیگه‌ای که بالا داریم
انجام بدیم
و بعد برگردیم به CSS
بیایید همه المنت‌هایی با کلاس first-li رو انتخاب کنیم
و یادتون باشه برای بولد کردن متن
از font-weight برابر با bold استفاده می‌کنیم
و همونطور که می‌بینید اینجاست
پس حالا این یکی بولد شده و اون یکی هم همینطور
اما می‌تونیم بهتر از این هم عمل کنیم
به جای اینکه دستی این کار رو انجام بدیم
می‌تونیم بذاریم CSS خودش به طور خودکار تشخیص بده
کدوم المنت li اولین المنت داخل یک container هست
پس بیایید این کار رو انجام بدیم و کلاس‌ها رو
توی HTML نگه داریم فقط به عنوان مرجع
اما حالا بذارید نشونتون بدم چطور می‌شه بهتر این کار رو کرد
پس شروع می‌کنیم با li که همه المنت‌های li رو انتخاب می‌کنه
ولی بعد از اون از یک شبه‌کلاس استفاده می‌کنیم
و شبه‌کلاس رو با یک دو نقطه شروع می‌کنیم مثل این
و اون چیزی که اینجا بهش نیاز داریم
به اسم first-child هست و همین
و حالا اینجا می‌تونیم font-weight رو بذاریم روی bold
بیایید ببینیم و همونطور که می‌بینید کار کرد
حالا دوباره بولد شدن
پس ما در واقع انتخابگرمون رو تغییر دادیم
و یک شبه‌کلاس بهش اضافه کردیم
و کاری که شبه‌کلاس first-child انجام می‌ده
اینه که یک المنت li رو انتخاب می‌کنه
یا در واقع همه المنت‌های li رو انتخاب می‌کنه
که اولین فرزند المنت والد خودشون باشن
و دقیقاً همینجا و همینجا اتفاق می‌افته
درسته؟
پس این المنت li اینجا اولین فرزند والدشه
که در اینجا تگ ol هست
و بنابراین این انتخابگری که نوشتیم
اون المنت رو هدف قرار می‌ده
و دقیقاً همین موضوع
برای این لیست دیگه پایین هم صدق می‌کنه
اوکی؟
پس بیایید یکی دیگه رو امتحان کنیم دوباره li
و یکی هم داریم به اسم last-child
خب بذارید italicش کنیم
پس font-style و مقدارش رو italic بذاریم
و همونطور که می‌بینید حالا آخری italic شد
هم اینجا و هم اونجا
چون هردوشون المنت‌های li هستن
که الان آخرین فرزند داخل container والد خودشون هستن
بعدی ما می‌تونیم حتی یک فرزند مشخص رو هدف بگیریم
مثلاً فرزند سوم یا دوم
برای این کار از شبه‌کلاس nth-child استفاده می‌کنیم
و اینجا
نیاز داریم پرانتز باز کنیم مثل این
تا مشخص کنیم کدوم فرزند رو می‌خوایم
مثلاً بگیم فرزند دوم
رنگش قرمز بشه
پس از نام رنگ کدگذاری‌شده استفاده می‌کنیم
ببینیم
و همونطور که می‌بینید اینجاست
یا اگر سومی رو امتحان کنیم
اونوقت سومی انتخاب می‌شه هم اینجا و هم اونجا
و حتی بهتر از این
اینه که می‌تونیم از کلیدواژه‌ها استفاده کنیم
مثلاً می‌تونیم odd بنویسیم
و حالا همه المنت‌های فرد قرمز می‌شن
پس المنت شماره یک و شماره سه
و اینجا المنت شماره یک سه
و پنج
و اگر بیشتر بود
اونوقت شماره‌های ۷۹۱۱ و همینطور ادامه پیدا می‌کنه
و البته اگر odd داشته باشیم even هم داریم
که اینطوری شماره‌های ۲۴۶۸
و همینطور ادامه پیدا می‌کنن
پس می‌بینید شماره دو و اینجا دو و چهار درسته؟
این تکنیک خیلی به درد می‌خوره
مثلاً برای استایل دادن به جدول‌ها
که اغلب پس‌زمینه‌های یکی در میون دارن
مطمئناً جایی اینو دیدین
و برای همین خیلی کاربردی هست
خب حالا بیایید این ویژگی رو کامنت کنیم
چون واقعاً نمی‌خوایم متنمون اینجا
توی صفحه نهایی قرمز باشه
خب این فقط برای این بود که نشون بدیم
چه کارهایی می‌تونیم اینجا انجام بدیم
خب در نهایت بذارید یک سوءتفاهم رایج
که در مورد شبه‌کلاس‌ها وجود داره رو براتون روشن کنم
فرض کنید می‌خواستیم انتخاب کنیم
اولین عنصر پاراگرافی که داخل تگ article هست
بیاید اینو توی کدمون بررسی کنیم
پس داخل article
اولین پاراگراف در واقع اینجاست درسته؟
خب ببینیم اینجا چه کار می‌تونیم بکنیم
چیزی که گفتم در واقع میشه article و بعد p
یعنی انتخابگرِ فرزند درسته نه؟
یعنی انتخاب پاراگرافی که داخل article قرار داره
و حالا انتخاب اولین اونها
پس first-child
فرض کنید می‌خوایم رنگش قرمز باشه
ولی وقتی صفحه رو ریفرش می‌کنیم و چک می‌کنیم
می‌بینید که هیچ اتفاقی نیفتاد
یعنی هیچ پاراگرافی قرمز نشد
پس سوءتفاهم اینجاست که این انتخابگر باید
اولین عنصر p داخل article رو انتخاب می‌کرد
و این هم دقیقا همینه نه؟
پس همونطور که دیدیم این پاراگراف در واقع
اولین پاراگراف داخل article هست
اما این چیزی نیست که
شبه‌کلاس first-child واقعا انجام میده
در عوض CSS میاد و یک عنصر p رو انتخاب می‌کنه
که واقعا اولین فرزند article باشه
درسته؟
خب؟
پس اون عنصر p اولین پاراگراف داخل article هست
اما اولین فرزند article نیست
اولین فرزند article در واقع تگ header هست
نه یک پاراگراف
بنابراین این انتخابگر اینجا کار نمی‌کنه
اونطوری که ممکنه فکر کنیم باید بکنه
این فقط زمانی کار می‌کنه که یک پاراگراف واقعا
اولین عنصر article باشه
خب این کار رو بکنیم
پس بذارید تغییر بدیم
و حالا اگر ذخیره کنیم واقعا یک پاراگراف قرمز گرفتیم
پس الان این پاراگراف اولین فرزند article هست
و بنابراین انتخابگرمون اعمال میشه
خب؟
حالا بریم سراغ آخر article
پس اینجا تموم میشه و می‌بینیم که یک پاراگراف
در واقع آخرین فرزند article هست درسته؟
پس چیزی که کار می‌کنه اینه
خب نتیجه رو ببینیم
و واقعا این متن الان قرمز شده
و منطقیه نه؟
باز هم این کار کرد چون یک عنصر p هست
داخل article و واقعا
آخرین فرزند اون article محسوب میشه
و بنابراین این انتخابگر اعمال شد
و دقیقا همون کاری رو انجام داد که باید
پس در اصل این یعنی
وقتی چندین نوع عنصر مختلف داخل یک والد داریم
این شبه‌کلاس‌ها خیلی خوب جواب نمی‌دن
اما برای موقعیت‌هایی مثل این یکی عالی هستن
جایی که همه عناصر فرزند یکسان هستن
مثلا در یک لیست ul یا ol
همه فرزندان باید li باشن
و بنابراین اینجاست که شبه‌کلاس‌هایی مثل first-child
last-child یا nth-child کاملا درست عمل می‌کنن
خب و اینطوری کار می‌کنیم
با این شبه‌کلاس‌ها
حالا شبه‌کلاس‌هایی که یاد گرفتیم
همشون مربوط به مطابقت با ساختار موجود HTML بودن
اما نوع‌های دیگه‌ای از شبه‌کلاس‌ها هم وجود دارن
پس بیاید بعضی از اونها رو
توی ویدیوی بعدی برای استایل دادن به لینک‌ها استفاده کنیم